Vue2 axios 配置请求后端多个地址

cg6

2264人浏览 · 2023-07-16 22:37:24

cg6 · 2023-07-16 22:37:24 发布

Vue axios 配置请求后端多个地址

创建url.js
创建request.js文件
创建http.js
应用-get请求
应用-post请求

创建url.js

//不同的地址对应不同的的访问路径
module.exports = {
    domain: {
      Base_DataSource_URL: 'http://localhost:8088', // 模块1接口地址
      Base_DataLineage_URL: 'http://localhost:8089', //模块2接口地址
    }
  }

创建request.js文件

/****   request.js   ****/
// 导入axios
import axios from 'axios';
// 使用element-ui Message做消息提醒，vue2使用element-ui ,vue3使用element-plus
import { ElMessage } from 'element-ui'; 
//引入 url.js
import {
    domain
  } from './url.js'
let DataSource_URL = domain.Base_DataSource_URL
let DataLineage_URL = domain.Base_DataLineage_URL
//1. 创建新的axios实例，
const service = axios.create({
    // 超时时间 单位是ms，这里设置了3s的超时时间
    timeout: 3 * 1000,
});
// 2.请求拦截器
service.interceptors.request.use(
    (config) => {
        console.log('config', config);
        //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
        config.headers = {
            // 默认请求类型，一般后端是以json接收对象
            'Content-Type':'application/json' 
            // 'Content-Type': 'application/x-www-form-urlencoded', //配置请求头
            // 'Content-Type':'multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC'
        };
        switch (config.urlType) {
            case 'api1':
                config.url = DataSource_URL + config.url;
                break;
            case 'api2':
                config.url = DataLineage_URL + config.url;
                break;
            default:
                config.url = DataSource_URL + config.url;
        }
        //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
        // const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
        // if(token){
        //   config.params = {'token':token} //如果要求携带在参数中
        //   config.headers.token= token; //如果要求携带在请求头中
        // }
        return config;
    },
    (error) => {
        Promise.reject(error);
    },
);
// 3.响应拦截器
service.interceptors.response.use(
    (response) => {
        //接收到响应数据并成功后的一些共有的处理，关闭loading等
        return response;
    },
    (error) => {
        /***** 接收到异常响应的处理开始 *****/
        if (error && error.response) {
            // 1.公共错误处理
            // 2.根据响应码具体处理
            switch (error.response.status) {
                case 400:
                    error.message = error.response.data.msg;
                    break;
                case 401:
                    error.message = '未授权，请重新登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = '请求错误,未找到该资源';
                    window.location.href = '/';
                    break;
                case 405:
                    error.message = '请求方法未允许';
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器端出错';
                    break;
                case 501:
                    error.message = '网络未实现';
                    break;
                case 502:
                    error.message = '网络错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网络超时';
                    break;
                case 505:
                    error.message = 'http版本不支持该请求';
                    break;
                default:
                    error.message = `连接错误${error.response.status}`;
            }
        } else {
            // 超时处理
            if (JSON.stringify(error).includes('timeout')) {
                ElMessage.error('服务器响应超时，请刷新当前页');
            }
            error.message = '连接服务器失败';
        }
        ElMessage.error(error.message);
        /***** 处理结束 *****/
        //如果不需要错误处理，以上的处理过程都可省略
        return Promise.resolve(error.response);
    },
);
//4.导入文件
export default service;

创建http.js

import request from './request';
const http = {
    /**
     * methods: 请求
     * @param url 请求地址
     * @param params 请求参数
     */
    get(url, params, type) {
        const config = {
            method: 'get',
            url: url,
            urlType: type,
        };
        if (params) {
            config.params = params;
        }
        return request(config);
    },
    get(url, type) {
        const config = {
            method: 'get',
            url: url,
            urlType: type,
        };
        return request(config);
    },
    post(url, params, type) {
        const config = {
            method: 'post',
            url: url,
            urlType: type,
        };
        if (params) config.data = params;
        return request(config);
    },
    put(url, params, type) {
        const config = {
            method: 'put',
            url: url,
            urlType: type,
        };
        if (params) config.data = params;
        return request(config);
    },
    delete(url, params, type) {
        const config = {
            method: 'delete',
            url: url,
            urlType: type,
        };
        if (params) config.params = params;
        return request(config);
    },
};
//导出
export default http;

应用-get请求

在对应的vue组件下的script标签下，添加created:function()的内容
【重点：http.get(‘/dataLineage/findAll’,‘dataLineage’)】

<template>
    <div>
      <el-table
            :data="dataLineageJobTableList"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
            prop="jobName"
            label="jobName">
        </el-table-column>
        <el-table-column
            prop="tableName"
            label="tableName">
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
import http from '../utils/http.js';
export default {
    methods: {
    // 不同行颜色标识
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    // 组件声明周期-创建
    created:function(){
      http.get('/dataLineage/findAll','dataLineage')
      // axios.get("http://localhost:8088/dataSource/findAll")
      // // 要使用 （变量）=> 才能访问dataSources变量
      .then((response)=>{
        // 后端请求数据赋值给本地变量
        console.log(response.data)
        this.dataLineageJobTableList = response.data
      })
    },
    data() {
      return {  
        dataLineageJobTableList: []
      }
    }
}
</script>
<style scoped>
.el-table-column {
    width:15%;
}
</style>

应用-post请求

在对应的vue组件下的script标签下，添加save方法的内容
【重点：http.post(‘/dataSource/add’,JsonData,‘dataSource’)】

<script>
import http from '../utils/http.js';
export default {
  methods: {
    check() {
      alert("连接成功")
    },
    save() {
      // 不需要再转换为接son,this.formData 本身json, JSON.stringify(this.formData) 转换后只能使用字符串接收了
      // const JsonData = JSON.stringify(this.formData);
      // 返回json对象
      // const JsonData = this.formData;
      let JsonData = this.formData;  // 表单 model="formData"
      http.post('/dataSource/add',JsonData,'dataSource')
        // axios.post("/dataSource/add", JsonData)
        .then((response) =>{
          console.log(JsonData)
          // 后端返回数据
          console.log(response.data);
            // 页面跳转到路由:DataSourceList
          if(response.data== true){
            this.$router.push({name: "DataSourceList"})
        }
      }).catch((error) => {
        console.error(error);
      })
    },
  },
  data(){
    return{
      formData: {
        dataSourceName:"",
        dbName: "",
        schemaName: "",
        host: "",
        port: "",
        userName: "",
        password: "",
        dbType: "",
        dataFlowType: ""
      },
  },
}
</script>