React axios拦截 + Promise

import axios from 'axios'
import _ from 'loadsh'

let cancelToken = axios.CancelToken

const cancel = []

const removePending = config => {
    for (let p in cancel) {
        if (cancel[p].u === config.url) {
            cancel[p].f()
        }
    }
}

// 请求拦截器 发送一个请求之前
axios.interceptors.request.use(config => {
    //在一个ajax发送前执行一下取消操作
    removePending(config)
    config.cancelToken = new cancelToken(c => {
        cancel.push({
            f: c,
            u: config.url,
        })
    })
    // 绑定key 值
    // config.data = { ...config.data.data, key: '5d2878270550ac239657ffa54edd96ff' }
  // config.headers = { ...config.headers, key: '5d2878270550ac239657ffa54edd96ff' }
  // config.token = JSON.parse( localStorage.getItem('persist: root')) .token
  // config.token = window.store.getState().login.token
  // config.data = qs.stringify({ ...config.data, token: window.store.getState().login.token })
    return config
}, error => {
    return Promise.reject(error)
})

//添加响应拦截器
axios.interceptors.response.use(response => {
    return response
}, error => { 
 	switch (_.get(error, 'response.status', '')) {
        case 500: 
            console.log('您已经断网了....')
            // window.location.href = '/'
            break;
        default:
            break;
    }
	return Promise.reject(error) 
})



export function requestPost(url, action = {}) {
    return new Promise((resolve, reject) => {
   // const { token } = JSON.parse( localStorage.getItem('persist:root') )
   // store.getState() 拿到所有的state
   // console.log(window.store.getState().login.token, )
   // store.js --- window.store = store
        axios({
            method: 'POST',
            //baseURL: '/api',
            url,
            data: action,
            //headers: {
		    //  key: '5d2878270550ac239657ffa54edd96ff',
	        //},
        })
            .then(res => resolve(res))
            .catch(err => reject(err))
    })
}

export function requestGet(url) {
    return new Promise((resolve, reject) => {
        axios({
            url
        })
            .then(res => resolve(res))
            .catch(err => reject(err))
    })
}

现在

import axios from 'axios'
import qs from 'qs'

export function requestPost(url, action = {}) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'POST',
            baseURL: '/api',
            url,
            data: qs.stringify(action),
        })
            .then(res => resolve(res))
            .catch(err => reject(err))
    })
}

export function requestGet(url) {
    return new Promise((resolve, reject) => {
        axios({
            url
        })
            .then(res => resolve(res))
            .catch(err => reject(err))
    })
}

Interceptors // 组件

import React from 'react'
import axios from 'axios'
import _ from 'loadsh'
import { withRouter } from 'react-router-dom'

export default @withRouter
class extends React.PureComponent {
    constructor(props) {
        super(props)
        let cancelToken = axios.CancelToken
        const cancel = []

        const removePending = config => {
            for (let p in cancel) {
                if (cancel[p].u === config.url) {
                    cancel[p].f()
                }
            }
        }

        // 请求拦截器 发送一个请求之前
        axios.interceptors.request.use(config => {
            //在一个ajax发送前执行一下取消操作
            removePending(config)
            config.cancelToken = new cancelToken(c => {
                cancel.push({
                    f: c,
                    u: config.url,
                })
            })
            return config
        }, error => {
            return Promise.reject(error)
        })

        //添加响应拦截器
        axios.interceptors.response.use(response => {
            return response
        }, error => {
		    switch (_.get(error, 'response.status', '')) {
		        case 500: 
		            console.log('您已经断网了....'
		            
		        default:
		            break;
		    }
			return Promise.reject(error) 
        })
    }
    render() {
        return <></>
    }
}

引入

import Interceptors from '@/components/Interceptors'

export default class extends React.PureComponent {
    render() {
        return (
            <BrowserRouter >
                <Interceptors />
                {renderRoutes(route)}
            </BrowserRouter>
        )
    }
}