Axios secondary packaging + cross-domain

Don’t worry during the whole process. After all the steps are completed, you will find success. There will inevitably be errors on the road to success. Don’t worry about it, just continue to follow the original plan step by step
.

1. Configure a cross-domain first

Create a new vue.config.js file in the root directory, and add the following code in devServer to it

const {
    
     defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  devServer: {
    
    
    proxy: {
    
    
      "/api": {
    
    
        target: "http://实际请求地址的域名", 
        // ws: true, 
        changeOrigin: true,
        pathRewrite: {
    
    
          "^/api": ""
        },
      },
    },
  },
});

2. Package axios

Create a new utils folder under the src file (remember it is a folder), create a new requests.js file in the utils folder , and add the following code to requests.js

//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";

//1.利用axios对象的方法create,去创建一个axios实例
//2.instance就是axios,只不过稍微配置一下
const instance = axios.create({
    
    
	//配置对象
	baseURL: 'http://localhost:8081',//存在跨域的话此处地址为本地地址，

});
//请求拦截器:在发请求之前，请求拦截器可以检测到,可以在请求发出去之前做一些事情
instance.interceptors.request.use(function (config) {
    
    
	console.log("请求成功拦截器执行");
	//config是个配置对象，对象里面有一个属性很重要，headers请求头
	return config;
}, function (error) {
    
    
	console.log("请求失败拦截器执行");
	return Promise.reject(error)
});

//  //响应拦截器：包含两个函数（一个是成功返回的函数，一个是失败的返回的函数）
instance.interceptors.response.use((response) => {
    
    
	console.log("响应成功拦截器执行");
	//成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情。
	if(response.data.code===200){
    
    
		return response=response.data.data;
	}
}, (error) => {
    
    
	if (error && error.response) {
    
    
        switch (error.response.status) {
    
    
            case 400:
                error.message = '错误请求'
                break;
            case 401:
                error.message = '未授权，请重新登录'
                break;
            case 403:
                error.message = '拒绝访问'
                break;
            case 404:
                error.message = '请求错误,未找到该资源'
                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 {
    
    
        error.message = "连接到服务器失败"
      }
	console.log("响应失败拦截器执行");
	return Promise.reject(error)
});
//对外暴露instance(axios的二次封装)
export default instance;

3. Encapsulation request method, here use get and post to make a sample

Create a new api folder under the src file (remember it is a folder), create a new index.js file in the api folder , and add the following code to index.js

//导入刚才写好的axios二次封装的instance
// 此模块封装get、post  等  请求方式
import request from "@/utils/requests"

//三级联动接口


// get请求
export const myGet = (getUrl) => {
    
    
    
    return request({
    
    
        url: getUrl,
        method: 'get'
    })
}

// post请求
export const myPost = (postUrl,params) => {
    
    
    
    return request({
    
    
        url:postUrl,
        method: 'post',
        data:params
    })
}

4. Do things where you need to send a request

It means that in the corresponding hook functions in the component, such as mounted, created, etc., you can write any request that can be sent.
Before sending the request, first introduce the packaged request. Here, you can directly introduce the corresponding request method.

const gxData = {
    
    
      gxId: 101,
    };
    myPost("api/xz/getXzTreeByGxId", gxData)
      // this.axios.post("api/prod-api/rygs/xz/getXzTreeByGxId",gxData)
      // request({
    
    
      //   url:"api/xz/getXzTreeByGxId",
      //   method:"post",
      //   data:{
    
    
      //     gxId:101
      //   }
      // })
      .then((res) => {
    
    
        console.log("res", res);
         return (this.data = res);
      })
      .catch((err) => console.log("err000", err));