在前端 fetch 某个接口,需要根据响应情况响应记录日志,梳理一下 fetch 调用时异步流程的可能分支:
fetch()
几乎不会 reject,即使网站返回 4xx、5xx,即使域名解析失败;.then(onResolve, onReject)
和.then(onResolve).catch(onReject)
是有区别的;
fetch(url)
.then(res => {
// res.status >= 300
if (!res.ok) throw new Error(`unpexected response ${res.status}`)
return res.json()
})
.then((payload) => {
// 响应数据格式为 { success: boolean, data: Array<any> }
if (payload.success) { // profit!
log({ success: true })
} else { // 请求成功但是服务调用有误
log({ success: false, message: payload.message })
}
}, err => {
// 前面 res.status >= 300 时丢出来的异常
log({ success: false, message: err.message })
})
.catch(err => {
// 前面处理 payload 时的异常
})