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

想請教一下大家一個需求：
存在有多個頁面，這些頁面進(jìn)來首頁都是有統(tǒng)一的加載動畫；
當(dāng)數(shù)據(jù)請求成功后，加載動畫就消失，加載頁面對應(yīng)的數(shù)據(jù)（有些頁面沒有數(shù)據(jù)的話，就渲染提示“暫無記錄”等文字說明）；
但是如果當(dāng)網(wǎng)絡(luò)狀況不好的時候，需要渲染提示用戶加載失敗的頁面，并提供“重新加載”按鈕；
有幾點想問問大家：
1.首先是請教下大家，這個需求該怎樣寫比較優(yōu)雅，怎樣封裝統(tǒng)一處理？（考慮后續(xù)加載動畫可能會換）；
2.根據(jù)什么判斷網(wǎng)絡(luò)狀況不好？請求返回的狀態(tài)碼嗎？那么哪些狀態(tài)碼是屬于網(wǎng)絡(luò)狀況不好的？
3.“重新加載按鈕”，這個功能是不是只能每個頁面都寫一次，因為現(xiàn)在都是ajax請求接口了，不能簡單的reload了吧？
最后，有什么不對的地方，請大家直接指出來，還是很菜的小白，先行謝過啦。

回答

編輯回答

入她眼

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

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

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

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

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

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

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

            // 不為 0 拋出提示 =>  這里我后端定義的是 0 即時正常數(shù)據(jù) 
            // 請根據(jù)你的實際應(yīng)用拋出的錯誤進(jìn)行調(diào)整 此時你也應(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)
        })
    })
}

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

2017年2月18日 10:55