axios的二次封装

在JavaScript中，可以通过创建一个新的函数来封装axios，以便在调用时提供更简洁的语法。以下是一个简单的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 => {
    // 可以在这里添加请求头等信息
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    return response.data;
  },
  error => {
    // 响应错误处理
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);
 
export default service;

使用封装后的axios进行请求：

import service from '@/utils/request';
 
// 获取用户列表
export function getUserList(params) {
  return service({
    url: '/user/list',
    method: 'get',
    params
  });
}
 
// 调用
getUserList({ page: 1, pageSize: 10 }).then(data => {
  console.log(data);
});

在这个例子中，我们创建了一个axios实例，并为其添加了请求和响应拦截器。然后，我们导出了这个实例，以便在应用程序中重复使用。通过封装，我们可以确保所有的请求都遵循相同的模式，并且可以很容易地添加、更改或移除拦截器。