简洁封装axios请求,拦截器等

  1. 简单封装axios发送get,post,put等各种请求,让请求体验保持一致。
    本质上除了get请求,其他请求都是post请求,所以单独处理下get请求,其他请求跟axios保持一致就可以:
import axios from "axios";
import { ElMessage } from 'element-plus'
//配置默认值
axios.defaults.baseURL = 'http://172.16.3.37:7001/api';
axios.defaults.timeout = 7000;

const request = {
    //创建一个用来发请求工厂
    /**
     * 一次请求
     * @param url    请求地址
     * @param type   method
     * @param data   参数 get请求时必须是 plain object
     * @returns {Promise}
     */
    one({url, type = 'get', data = {}}) {
        return new Promise((resolve, reject) => {
            if (type.toLowerCase() == "get") {
                axios.get(url, {params: data}).then(res => {
                    resolve(res.data)
                }).catch(e => {
                    ElMessage.error('操作失败')
                    reject(e)
                })
            } else {
                axios[type.toLowerCase()](url, {data: data}).then(res => {
                    resolve(res.data)
                }).catch(e => {
                    ElMessage.error('操作失败')
                    reject(e)
                })
            }
        })
    },
    /**
     * 循环请求完成后执行某项操作
     * @param arr 数组
     * @returns {Promise}
     */
    multiple(arr) {
        let parr = [];
        arr.forEach(async item => {
            parr.push(await this.one(item))
        })
        return new Promise((resolve, reject) => {
            Promise.all(parr).then(res => {
                resolve(res)
            }).catch(e => {
                reject(e)
            })
        })
    }
}
export default request
  1. axios拦截器
/**
 * 可执行的策略
 * @type {{HEADER: (function(*): *)}}
 */
const strategyMap = {
    'HEADER': (config) => {
        let configTemp = config
        // 给请求头加些什么
        if (true) {
          configTemp.headers = {
                'X-API-ACCOUNT-KEY': 'KEY',
                'Authorization': 'AUTHORIZATION',
            }
        }
        return configTemp
    },
}
/**
 * 执行config策略
 * @param config
 * @param {[string]} strategies
 * @returns {*} config
 */
import {merge} from "lodash-es"
export const executeStrategies = (config, strategies) => {
    let configTemp = config
    // 请求拦截器是对config做进一步处理
    // 合并所有
    for (let i = 0; i < strategies.length; i++) {
        if (strategyMap[strategies[i]]) {
            configTemp = merge(configTemp, strategyMap[strategies[i]](config))
        }
    }
    return configTemp
}
export const requestInterceptor = {
    onFulfilled: function (config) {
        // 在发送请求之前做些什么
        // 执行HEADER策略
        return executeStrategies(config, ['HEADER',]);
    },
    onRejected: function (err) {
        // 对请求错误做些什么
        return Promise.reject(err);
    }
}
// 使用拦截器
axios.interceptors.request.use(requestInterceptor.onFulfilled, requestInterceptor.onRejected)

你可能感兴趣的:(javascript,前端,开发语言)