axios的封装与使用（做了防止多次重复请求处理）

请求封装

// ajax.js
import axios from 'axios';
import qs from 'qs'; //参数编译

let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken; //引入取消请求方法
//请求完成后取消该请求，从队列删除
let removePending = (ever) => {
    for(let p in pending){
        if(pending[p].u === ever.baseURL) { //当前请求在队列中存在时
            pending[p].f(); //执行取消操作
            pending.splice(p, 1); //把这条记录从队列中移除
        }
    }
}

let baseURL
//项目需要，如果是开发环境走本地ip跨域访问（前提是项目有多环境配置文件，配置有代理方法）
if (process.env.REACT_APP_ENV === 'development') {
    baseURL = '/api'
} else {
    //非开发环境下获取配置文件的baseurl
    baseURL = process.env.REACT_APP_BASE_URL
}
//请求封装 method请求方法，全大写 params参数 url路径
export const http = (method, params, url, preventRepeat=true,uploadFile=false) => {
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL: baseURL + url,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
                //可添加其他公用参数，比如token等
            },
            //设置超时
            timeout: 50 * 1000
        });
        //默认阻止重复请求
        if (preventRepeat) {
            // request拦截器
            instance.interceptors.request.use(
                config => {
                    removePending(config);//防止双击多次触发请求
                    config.cancelToken = new cancelToken((c)=>{
                        pending.push({ u: config.baseURL, f: c });
                     });
                    return config;
                },
                err => {
                    return Promise.reject(err);
                }
            );
            //response拦截器
            instance.interceptors.response.use(
                response => {
                    removePending(response.config);
                    return response;
                },
                error => {
                  return Promise.reject(error)
                }
            );
        } else {
            // 拦截器
            instance.interceptors.request.use(
                config => {
                    return config;
                },
                err => {
                    return Promise.reject(err);
                }
            );
            instance.interceptors.response.use(
                response => {
                    return response;
                },
                error => {
                    return Promise.reject(error)
                }
            );
        }
        // 请求(uploadFile为true表示上传文件binary类型，则参数不需要编译)
        instance(
            Object.assign(
                {},
                {method},
                (method === 'POST' || method === 'PUT') ? {data: !uploadFile?qs.stringify(params):params} : {params}
            )
        ).then(response => {
            // success
            if (response.data.code === 200) {
                resolve(response.data);
            }  else {
                resolve(false)
            }
        })
        .catch(error => {
            resolve(false)
        });
    });
}

使用
1.个人习惯，把所有api写在一个文件里，默认跟ajax.js同级目录

//api.js
import {http} from './ajax.js'
//示例，默认参数为空,特殊情况有些接口需要循环请求的，可以设置参数preventRepeat为false
//post
export const login = (params={}) => http('POST', params, '/login')
//get
export const getList = (params={}) => http('GET', params, '/list')
export const getDetail = (id,params={}) => http('GET', params, `/detail/${id}`)

2.在需要调用请求的页面发起请求

import {login, getList, getDetail} from 'api.js' //根据自己项目文件的路径来写

//请求
login({name:'张三',password:'123456'})
getList() //没有参数的情况
getDetail(1)

//异步处理等待请求完成获取数据
async function getData () {
  const data = await getDetail(1)
  console.log(data)
}
getData()