又又又是axios封装，顺便复习下ts

基础server

useServer

• 入参
  • axios config
  • 自定义业务配置（业务相关的请求拦截，业务相关的响应拦截,.......）
• 返回
  • axios实例

处理请求和响应拦截。响应拦截中会处理通用的http错误。响应拦截一旦被拦截就会进入reject状态。

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";

const NETWORK_STATUS_MAP: { [index: number]: string } = {
    400: '错误的请求',
    401: '未授权，请重新登录',
    403: '拒绝访问',
    404: '请求错误，未找到该资源',
    405: '请求方法未允许',
    408: '请求超时',
    500: '服务器端出错',
    501: '网络未实现',
    502: '网络错误',
    503: '服务不可用',
    504: '网络超时',
    505: 'http版本不支持该请求'
}
/**
 * 自定义的响应拦截返回类型
 */
export interface IBusinessInterceptorsResponse {
    flag: boolean;
    msg: string
}
/**
 * 自定义请求拦截fn
 */
type interceptorsRequestType = (config: AxiosRequestConfig) => AxiosRequestConfig;
/**
 * 自定义响应拦截fn
 */
type interceptorsResponseType = (response: AxiosResponse) => IBusinessInterceptorsResponse
/**
 * 业务类配置
 */
export interface IBusinessConfig {
    interceptorsRequest?: interceptorsRequestType;
    interceptorsResponse?: interceptorsResponseType;
}
/**
 * @description: useuseuse
 * @param {AxiosRequestConfig} config
 * @param {IBusinessConfig} businessConfig
 * @return {*}
 */
const useServer = (config: AxiosRequestConfig, businessConfig?: IBusinessConfig) => {
    const server: AxiosInstance = axios.create(config);
    /**
     * 请求拦截
     */
    server.interceptors.request.use((config: AxiosRequestConfig) => {
        // 全局请求拦截
        // 自定义请求拦截 业务头，权限啥的塞这哟
        if (businessConfig?.interceptorsRequest) {
            config = businessConfig.interceptorsRequest(config)
        }

        return config
    })
    /**
     * 响应拦截 如果被拦截了 就reject啦
     */
    server.interceptors.response.use((response: AxiosResponse) => {
        // 全局响应拦截器
        const { status } = response
        let message = ''
        // http异常
        if (status < 200 && status >= 300) {
            message = NETWORK_STATUS_MAP?.[status] || `其他连接错误 -- ${status}`
            // ```````这里应该有个msg弹出提示
            return Promise.reject(message)
        }
        if (businessConfig?.interceptorsResponse) {
            const { flag, msg } = businessConfig.interceptorsResponse(response)
            if (!flag) {
                // ````````这里应该有个msg弹出提示
                return Promise.reject(msg)
            }
        }
        return Promise.resolve(response.data)
    }, (err) => {
        // `````````这里应该有个msg弹出提示
        return Promise.reject(err)
    })
    return server
}
export default useServer

拓展Api

基于useServer，可以再封一个post,get,....的使用。

• 入参
  • axios实例
• 返回
  • {post,get,......}

主要用于封装不同类型的请求~根据业务需求

import { AxiosInstance } from "axios"

const useApi = (server: AxiosInstance) => {
    /**
     * @description: 平平无奇get
     * @param {string} url
     * @param {object} params
     * @return {Promise}
     */
    function get(url: string, params: { [index: string]: any } = {}) {
        return server.get(url, {
            params,
        })
    }
    /**
 * @description: 平平无奇post
 * @param {string} url
 * @param {object} data
 * @return {Promise}
 */
    function post(url: string, data: { [index: string]: any } = {}) {
        return server.post(url, {
            data
        })
    }
    /**
     * @description: post formdata数据 传对象啊 自动转formdata啦 我也不知道为什么功能相似的接口有的要用json有的要用formdata
     * @param {string} url
     * @param {object} data
     * @return {*}
     */
    function postFormData(url: string, data: { [index: string]: any } = {}) {
        const formData = new FormData();
        for (const key in data) {
            formData.append(key, data[key]);
        }
        return server.post(url, {
            data,
            headers: { "Content-Type": 'multipart/form-data', }
        })
    }
    // ········其他什么传参格式不同啦，接受格式不同啦的全塞这
    return {
        post, get, postFormData
    }
}

export default useApi

使用

import useServer from "@/libs/axios";
import useApi from "@/libs/axios/useApi";

const server = useServer({
    baseURL: '',
    timeout: 6000
})
const { post, get } = useApi(server)

export {
    post, get
}

取消请求的拓展

当有重复url请求时，取消上一个请求~简单整一个，按需细化~

可以用在useServer的拦截里，也可以用在useApi的具体请求中~

import axios from "axios"

export default () => {
    const cancelRequestMap: Map<string, () => void> = new Map();

    function getCancelToken(url: string) {
        if (cancelRequestMap.has(url)) {
            // 重复了 取消上一个请求
            const cancelFn = cancelRequestMap.get(url)
            cancelFn && cancelFn()
            cancelRequestMap.delete(url)
            // 再插入新的请求
            return pushCancel(url)
        }
        return pushCancel(url)
    }
    function pushCancel(url: string) {
        const cancelToken = new axios.CancelToken(c => {
            cancelRequestMap.set(url, c)
        })
        return cancelToken
    }
    // 删除map
    function delCancel(url: string) {
        cancelRequestMap.delete(url)
    }
    return {
        getCancelToken, delCancel
    }
}

以上代码均无测试过(dog)