axios拦截器封装案例

axios是一种常用的HTTP请求库，可以在浏览器和Node.js中使用。通过axios，我们可以方便的发送HTTP请求和处理响应。axios拦截器可以帮助我们在请求和响应之前对数据进行预处理和处理。下面是一个axios拦截器封装案例。

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做一些处理
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);

export default service;

在上面的代码中，我们创建了一个axios实例，并添加了请求和响应拦截器。在请求拦截器中，我们可以在请求发送之前对请求进行一些处理。在响应拦截器中，我们可以对响应进行一些处理，例如对返回的数据进行格式化。

使用封装好的axios实例发送请求时，可以像下面这样使用：

import request from '@/utils/request';

// 发送GET请求
request.get('/user', { params: { id: 123 } }).then(response => {
  console.log(response);
});

// 发送POST请求
request.post('/user', { id: 123 }).then(response => {
  console.log(response);
});

通过封装axios拦截器，我们可以方便的对请求和响应进行处理，避免在每个请求中都进行相同的处理。