Vue 网络处理 - axios 异步请求的使用，请求响应拦截器（最佳实践）

import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头部，例如：
    // config.headers['Authorization'] = 'Bearer ' + userInfo.token;
    // 可以在这里根据条件做一些处理，例如：
    // if (userInfo.token) {
    //   config.headers['Authorization'] = 'Bearer ' + userInfo.token;
    // }
    return config;
  },
  error => {
    // 请求错误时的处理
    return Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 可以在这里对响应数据做一些处理
    return response.data; // 这里我们直接返回数据
  },
  error => {
    // 响应错误的处理
    return Promise.reject(error);
  }
);
 
export default service;

这个代码实例展示了如何在Vue项目中使用axios库，并配置请求拦截器和响应拦截器。在请求拦截器中，我们可以添加一些全局的请求头部，例如添加认证token。在响应拦截器中，我们可以对返回的数据进行处理，例如直接返回响应的数据部分。这样可以简化我们的业务代码，并提高代码的复用性。