Vue之Axios的异步请求问题详解

Axios简介

Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js，其最大的优点是可以支持浏览器和Node.js的同时使用，同时还有很多高级功能，如拦截请求和响应、自动转换JSON数据、取消请求等。

Axios的基本用法

在Vue中使用Axios需要先安装axios：npm install axios --save

然后在Vue组件中引入：import axios from 'axios'

Axios的基本使用方式是在Vue组件中调用axios提供的方法，如get、post、put、delete等。

发送get请求

axios.get('url').then(function (response) {
  console.log(response)
}).catch(function (error) {
  console.log(error)
});

发送post请求

axios.post('url', {
    data: {}
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
})

Axios的异步请求问题

在使用Axios发送异步请求时，需要注意以下几个问题：

1. 回调函数中的this指向问题

由于箭头函数内部的this是指向定义时的对象，所以在使用箭头函数时应该注意this指向问题，并且在回调函数中不能使用Vue组件中的this，需要在回调函数中先将this保存在一个变量中，再在回调函数中使用。

示例代码：

export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    const vm = this;
    axios.get('/api/list').then((response) => {
      vm.list = response.data;
    }).catch(function (error) {
      console.log(error);
    })
  }
}

2. 请求拦截和响应拦截

Axios提供了请求拦截和响应拦截两个钩子函数，可以在发起请求前和响应返回后对请求和响应进行处理，如添加请求头、loading效果、错误处理等。

示例代码：

axios.interceptors.request.use((config) => {
    // 在发送请求之前做些什么
    if (localStorage.token) {
        // 如果用户已经登录，则将token添加到请求头中
        config.headers.Authorization = `Bearer ${localStorage.token}`
    }
    return config;
}, (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
    // 对响应数据做点什么
    return response;
}, (error) => {
    // 对响应错误做点什么
    console.log(error);
    return Promise.reject(error);
});