shuyuanweb/src/utils/request.js

/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
import axios from "axios";
// import QS from 'qs';

// 环境的切换
axios.defaults.baseURL =
    import.meta.env.VITE_BASE_URL;

// 请求超时时间
axios.defaults.timeout = 25000;

// post请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
// axios.defaults.headers.post["Content-Type"] = "application/json; charset=UTF-8";

let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelRepeatUrl = []; // 园区服务、物业租售
let cancelToken = axios.CancelToken;
let removePending = config => {
    // console.log(config);
    for (let i in pending) {
        if (pending[i].url === axios.defaults.baseURL + config.url) {
            //在当前请求在数组中存在时执行取消函数
            pending[i].f(); //执行取消操作
            // pending.splice(i, 1); // 根据具体情况决定是否在这里就把pending去掉
            // console.log("重复的：" + pending[i].url);
        }
    }
};

// 请求拦截器
axios.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        // const token = store.state.token;
        // token && (config.headers.Authorization = token);
        // return config;
        removePending(config); //在一个axios发送前执行一下判定操作，在removePending中执行取消操作
        // console.log(config.url);
        config.cancelToken = new cancelToken(function executor(c) {
            //本次axios请求的配置添加cancelToken
            if (cancelRepeatUrl.indexOf(config.url) > -1) {
                pending.push({
                    // url: config.url,
                    url: axios.defaults.baseURL + config.url,
                    f: c,
                });
                // console.log(axios.defaults.baseURL + config.url);
                //将本次的url添加到pending中，因此对于某个url第一次发起的请求不会被取消，因为还没有配置取消函数
            }
        });
        return Promise.resolve(config);
    },
    error => {
        return Promise.error(error);
    }
);

// 响应拦截器
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            // removePending(response.config); //在一个axios响应后再执行一下取消操作，把已经完成的请求从pending中移除
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况
    error => {
        if (error.response) {
            return Promise.reject(error.response);
        }
    }
);
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params,
            })
            .then(res => {
                resolve(res);
            })
            .catch(err => {
                reject(err);
            });
    });
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params, options) {
    return new Promise((resolve, reject) => {
        axios
            .post(url, params, options)
            .then(res => {
                resolve(res);
            })
            .catch(err => {
                reject(err);
            });
    });
}

/**
 * put方法，对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function put(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .put(url, params)
            .then(res => {
                resolve(res);
            })
            .catch(err => {
                reject(err);
            });
    });
}

/**
 * delete方法，对应delete请求,delete是保留字，使用del代替
 * @param {String} url [请求的url地址]
 */
export function del(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .delete(url, {
                params: params,
            })
            .then(res => {
                resolve(res);
            })
            .catch(err => {
                reject(err);
            });
    });
}