开箱即用的Axios的封装

每次开一个新项目，是否要重新封装APi，本篇文章开箱即用，如果你需要使用axios，都可以试用，这里能不详细讲解axios了，如果需要更多配置可以访问www.axios-http.cn/docs/intro 查看

Axios的封装

import axios from 'axios';
import qs from 'qs';


axios.interceptors.request.use(
  function (config) {
    const { headers, ...rest } = config;
    return {
      ...rest,
      paramsSerializer: function (params) {
        return qs.stringify(params, { arrayFormat: 'repeat' });
      },
      headers: {
      //这里可以附加一些额外与后端的参数
        ...headers,
      },
    };
  },
  function (error) {
    return Promise.reject(error);
  },
);

axios.interceptors.response.use(function (response) {
  const data = response.data;
  //约定后端的状态码
  if (data?.code) {
    if (data.code == 200) {
      return data
    }
  }

}, function (error) {
  return Promise.reject(error);
});


export default axios;

请求示范

//这里的url我才用了配置
export function getXXXX(data) {
  return request(`${process.env.BASEURL}/xxxxxxx`, {
    method: 'get',
    data,
  });
}


export function postXXXXX(data) {
  return request(`${process.env.BASEURL}/xxxxxxx`, {
    method: 'post',
    data,
  });
}

以上只需在项目中直接使用即可