vue3中axios的使用方法独到之处

今天给大家介绍一下vue3中axios的使用方法独到之处？axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。

1、安装

npm install axios

2、新建axios.js配置

import axios from "axios";
import qs from "qs";

axios.defaults.baseURL = ''  //接口路径

//post请求头
axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;

axios.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
 
axios.interceptors.response.use(
   response => {
      if (response.status == 200) {
        return Promise.resolve(response);
      } else {
        return Promise.reject(response);
      }
   },
  
   error => {
      alert(`异常请求：${JSON.stringify(error.message)}`)
   }
);
export default {
  //post方法
  post(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url,
        data: qs.stringify(data),
      }).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      });
    })
  },
  //get方法
  get(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'get',
        url,
        params: data,
      }).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }
};

3、vue页面引用

getList: function () {
  const _this = this;
  axios.get("/list", {
  	// id: 1
  }).then(function (res) {
  	console.log(res.data);
  	let _res = res.data || [];
  	if (_res && _res.length > 0) {
  		_this.code = res.code;
  		_this.msg = res.msg;
  		_this.books = _res;
  	}
  }).catch(function (error) {
  	console.log(error);
  })
}

4、注意事项

问题1：vue3 axios Error: Network Error

跨域请求问题，我是在后端拦截器类中处理的 ，重写 addCorsMappings 方法

//跨域问题
@Override
public void addCorsMappings(CorsRegistry registry) {
  registry.addMapping("/**")
     .allowedHeaders("*")
     .allowedMethods("*")
     .allowedOriginPatterns("*")
     .allowCredentials(true);
}

问题2：Cannot set properties of undefined (setting 'books')或者ReferenceError: books is not defined

不能直接给变量赋值，需要通过 methods 方法中 const _this = this; 获取变量赋值；

vue 请求接口代码需要放置methods，且在created（）或者mounted()周期函数中调用该方法。

问题3：Uncaught ReferenceError: Vue is not defined或者Cannot read properties of undefined (reading 'get')

vue3不是通过Vue对象挂载，后面我每个页面直接引用了axios（目前vue3好像只有这种方式）