axios二次封装+跨域

在整个过程中不要着急，等所有步骤做完你就会发现成功了，在成功的路上难免会有报错，不用管它，继续按照原计划一步一步走就行
欢迎大牛喷

一、先配个跨域

在根目录新建vue.config.js文件，在里面加入下面的devServer中的代码

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

二、封装axios

在src文件下新建utils 文件夹 (记住是文件夹），在utils文件夹中新建requests.js 文件,在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;

三、封装请求方式，这里用get和post打个样

在src文件下新建api 文件夹 (记住是文件夹），在api文件夹中新建index.js 文件 ,在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
    })
}

四、需要发请求的地方搞事情

就是组件中相应的钩子函数中，比如mounted，created等等，能发请求的都可以写
在发请求之前先引入封装好的请求，这里直接引入相应的请求方式即可

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));