請(qǐng)教一個(gè)需求該如何實(shí)現(xiàn)比較優(yōu)雅？備注：React寫的

首先非常簡(jiǎn)單的是 如果你是用的是axios 那么可以這么做
使用axios的攔截處理

import axios     from 'axios'
import qs        from 'qs'
// 這里是你想要loading的動(dòng)畫 這里我先用antd-mobile演示
import { Toast } from 'antd-mobile';
// 簡(jiǎn)單的設(shè)置超時(shí)時(shí)間
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'

// 請(qǐng)求攔截
axios.interceptors.request.use(config => {
        // 進(jìn)行l(wèi)oading動(dòng)畫
        Toast.loading('請(qǐng)求數(shù)據(jù)中...', 0)

        if (config.method === "post" || config.method === "put" || config.method === "delete") {
            // 序列化
            config.data = qs.stringify(config.data);
        }
        return config;
    },
    // 請(qǐng)求發(fā)生錯(cuò)誤
    error => {
        // 在這里處理你想要做的錯(cuò)誤處理 比如 出現(xiàn)重新加載等等... 
        // 一旦捕獲錯(cuò)誤 就給redux設(shè)置一個(gè)全局狀態(tài)  當(dāng)然狀態(tài)根據(jù)你的業(yè)務(wù)需求自己定義 比如 1代表 xx 2 代表xx  根據(jù)redux不同狀態(tài)去做不同事情
        // ...somecode 
        
        // 拋出錯(cuò)誤信息
        return Promise.reject(error.data.error.message);
    });

// 響應(yīng)攔截
axios.interceptors.response.use(config => {
    // 取消掉loading
    Toast.hide()
    return config
})

// 請(qǐng)求封裝
export default function fetch(url, params = {}, method = 'get') {
    // 處理不同請(qǐng)求方式的傳參格式
    if (method === 'get') {
        params = {params}
    }
    return new Promise((resolve, reject) => {

        axios[method](url, params).then(res => {

            // 不為 0 拋出提示 =>  這里我后端定義的是 0 即時(shí)正常數(shù)據(jù) 
            // 請(qǐng)根據(jù)你的實(shí)際應(yīng)用拋出的錯(cuò)誤進(jìn)行調(diào)整 此時(shí)你也應(yīng)該用redux 設(shè)置全局狀態(tài) 進(jìn)行你想要的業(yè)務(wù)需求 比如出現(xiàn)按鈕
            res.data.code && Toast.info(res.data.msg, 1, null, true)
                
            resolve(res.data)


        }).catch(error => {
        // 接口異常 進(jìn)行處理
           // ...somecode
            reject(error)
        })
    })
}

如上 捕獲超時(shí)時(shí)間 捕獲接口錯(cuò)誤信息 以及捕獲請(qǐng)求發(fā)送錯(cuò)誤 然后設(shè)置redux 即可