Axios通用封装包

前言

本篇文章主要展示笔者开发过程中常用的axios封装包

axiosInstance.js

import axios from 'axios';

const instance = axios.create({
  //baseUrl，替换为相应的后端接口
  baseURL: 'youUrl',
  //超时时长
  timeout: 30000,
  //headers的基础配置
  headers: {
    "Content-Type": "application/json",
  },
});

instance.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  //response处理
  (response) => {
  	//获取后端返回的状态码（此处后端为status，具体看后端怎么写）
    const status = response.data.status;
    //状态码为400的统一处理
    if (status === 400) {
      console.log(response)
    }
    //返回response
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

axiosApi.js

import axios from './axiosInstance';

export function makeRequest({
  url,
  //默认为get
  method = 'get',
  params = {},
  data = {},
  headers = {},
}) {
  return axios({
    url,
    method,
    params,
    data,
    headers,
  });
}

使用案例

//引入
import { makeRequest } from '@/api/axiosApi';

makeRequest({
        url: '/vcCompany/queryLabelList',
        method: 'post',
        params: {},
        data: {},
        headers: { token: this.myToken },
      })
        .then(response => {
          console.log(response)
          if (response.data.code === 200) {
			alert('success')
          }
        })
        .catch(error => {
          console.error('Error posting data:', error);
        });