在前端 fetch 某个接口,需要根据响应情况响应记录日志,梳理一下 fetch 调用时异步流程的可能分支:

    1. fetch() 几乎不会 reject,即使网站返回 4xx、5xx,即使域名解析失败;
    2. .then(onResolve, onReject).then(onResolve).catch(onReject) 是有区别的;
    1. fetch(url)
    2. .then(res => {
    3. // res.status >= 300
    4. if (!res.ok) throw new Error(`unpexected response ${res.status}`)
    5. return res.json()
    6. })
    7. .then((payload) => {
    8. // 响应数据格式为 { success: boolean, data: Array<any> }
    9. if (payload.success) { // profit!
    10. log({ success: true })
    11. } else { // 请求成功但是服务调用有误
    12. log({ success: false, message: payload.message })
    13. }
    14. }, err => {
    15. // 前面 res.status >= 300 时丢出来的异常
    16. log({ success: false, message: err.message })
    17. })
    18. .catch(err => {
    19. // 前面处理 payload 时的异常
    20. })