利用axios请求封装适用于vue和react

1、定义常量

interface KV {
    [key: string]: string
}

interface HostEnv {
    host: RegExp,
    env: string
}

const host: string = window.location.host
console.log("host"+host);
const origin: string = window.location.origin
console.log("origin"+host);

const envUrl: KV = {

    // local: 'http://localhost:8000',

}
const hostEnv: HostEnv[] = [
    {host: /daily/, env: 'daily'},

    {host: /.*/, env: 'local'},
]


export const ENV = hostEnv.find(item => item.host.test(host)).env
export const BASE_URL = `${envUrl[ENV]}/api`

2、通过axios封装

import axios, {AxiosRequestConfig} from 'axios'
import qs from 'qs'
import {message} from 'antd'
import {BASE_URL as baseURL} from '@/constants/env'

type Request = (url: string, data?: object, stringify?: boolean) => Promise<any>

interface HttpRequest {
    get?: Request
    post?: Request
    delete?: Request
    put?: Request
}

type Method = 'get' | 'post' | 'delete' | 'put'

const methods: Method[] = ['get', 'post', 'delete', 'put']

const http: HttpRequest = {}

methods.forEach(v => {
    // @ts-ignore
  http[v] = (url: string, data: any, stringify: boolean) => {
        const config: AxiosRequestConfig = {
            url,
            method: v,
            baseURL
        }
        const instance = axios.create({
            baseURL,
        })

        instance.interceptors.request.use(
            cfg => {
                // 给请求添加头部信息
                // cfg.headers['token'] = '111'
                cfg.withCredentials = true
                return cfg
            },
            error => {
                // 错误抛出
                return Promise.reject(error)
            }
        )
        // 结果拦截器
        instance.interceptors.response.use(
            res => {
                // if (res && res.data && res.data.code !== undefined && res.data.code !== 0) {
                //     // eslint-disable-next-line prefer-promise-reject-errors
                //     return Promise.reject({ response:{data:{code: res.data.code, message: res.data.msg }}})
                // }
                if (res && res.data) {
                    if (res.data.data) {
                        return res.data.data
                    }
                    return res.data
                }
                return res
            },
            error => {
                // 错误抛出
                return Promise.reject(error)
            }
        )

        if (v === 'get' || v === 'delete') {
            config.params = data
        } else {
            if (stringify) {
                config.data = qs.stringify(data)
            } else {
                config.data = data
            }
        }

        return instance
            .request(config)
            .then(res => {
                return res
            })
            .catch(err => {
                // 错误集中处理
                message.destroy()
                if (!!err.response) {
                    const errData = err.response.data
                    message.error(errData.message)
                } else {
                    const msg = err.message === 'Network Error' ? '网络错误' : '未知错误'
                    message.error(msg)
                }
                return Promise.reject(err)
            })
    }
})

export default http

3、使用上面的封装

import http from './http'
// import initApi from "./initRequest";

// location
export const location = (data = {}) => {
  // @ts-ignore
  return http.get('location', data)
}

export const getChange = (data = {}) => {
  // @ts-ignore
  return http.get('queryRelease', data)
}

export const pushFeedback = (data = {}) => {
  // @ts-ignore
  return http.post('pushFeedback', data)
}