vue中 axios完整封装

Posted 2021-09-07 嘴巴嘟嘟

安装好axios 然后在工具类创建request.js

import axios from 'axios'

import { router } from '../router';

  let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
    let cancelToken = axios.CancelToken;
    let removePending = (ever) => {
        for(let p in pending){
            if(pending[p].u === ever.url + '&' + ever.method) { //当当前请求在数组中存在时执行函数体
                pending[p].f(); //执行取消操作
                pending.splice(p, 1); //把这条记录从数组中移除
            }
        }
    }

const service = axios.create({
  baseURL: window.configs.baseApi,
  timeout: 5000 * 60
});



service.interceptors.request.use(
  config => {
    config.headers['chainType'] = getChainType();
    config.headers['address'] = localStorage.getItem('connected_account');
	
	   removePending(config); //在一个ajax发送前执行一下取消操作
      config.cancelToken = new cancelToken((c)=>{
         // 这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式
         pending.push({ u: config.url + '&' + config.method, f: c });  
      });
    return config;
  },
  error => {
    return Promise.reject();
  }
);

service.interceptors.response.use(
  response => {
    if (response.status === 200) {
      let { data } = response;
      if (data.code === 500) {
       
      }
      removePending(response.config) //在一个ajax响应后再执行一下取消操作，把已经完成的请求从pending中移除
      return response.data;
    } else {
      Promise.reject();
    }
  },
  error => {
    if (error.code == 4001) {
    
    }
    return Promise.reject();
  }
);

export default service;

使用接口 单独创建user.js文件中使用

import axios from 'axios'
import request from 'utils/request';
axios.defaults.timeout = 20000;

// 自定义方法
const doPost= (data) => {
  return request({
    url:"bbb",
    method:'post',
    data
  })
}
const doGet= (params) => {
  return request({
    url:"bbb",
    method:'get',
    params
  })
}
// 上传文件
const doImg = (data) => {
  return request({
    url: 'file/cccc',
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    data
  });
};
export {
  doGet,doPost,doImg
}

import {doPost} from '@api/user.js';