Promise使用时应注意的问题

更新日期: 2018-11-19阅读量: 1871标签: Promise

最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到。


1. 调用接口的业务代码如下:  

// 业务代码调用
axios({
    url: url,
    method: 'post',
    data: data
  }).then(res => {
    // 提示用户数据更新成功
    // 问题:后端接口明明报了500错误,但代码确运行到了这里,导致前端界面提示更新成功
  }).catch(err => {
    // 提示用户更新失败
    // 问题:本该运行到这里捕获错误,结果却并未捕获
  })

很奇怪,代码未按预期的结果运行。 


2. 检查下axios整体的配置

// 自己封装的用来过滤http错误的方法
function filter500(error, code, errMsg) {
  // 界面提示代码略
  
  return Promise.reject(new Error(error))
}

// axios整体配置,对响应进行拦截
axios.interceptors.response.use(data => {
  // ui效果代码略
  return data
}, error => {
  // ui效果代码略
  const errMsg = error.toString()
  const code = errMsg.substr(errMsg.indexOf('code') + 5)

  if (code === '401') {
    filter401() // 注意这里并未返回
  } else if (code === '500') {
    filter500(error, code, errMsg) // 注意这里并未返回
  } else {
    return Promise.reject(new Error(error))
  }
})


在axios整体配置的代码中,过滤http code时,调用了filter401()、filter500(),但是这里注意并未将两个filter函数的结果返回,也就是并未返回promise,这就是导致问题出现的原因,也就是当后端接口报了500错误时被axios拦截了但确并未返回一个promise,导致业务代码中未捕获此错误。所以记住:
**在每个promise链条中必须返回promise,否则调用结果可能和你预期不一样。**  


来源:https://www.cnblogs.com/yangtoude/p/promise-chain.html


 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1367

Promise不是Callback

这一篇是在实际工程中遇到的一个难得的例子;反映在Node里两种编程范式的设计冲突。这种冲突具有普适性,但本文仅分析问题本质,不探讨更高层次的抽象。

Anti-promise Promise反模式

Nested Promise(嵌套的Promise)你这样书写的原因是需要对2个promise的结果进行处理,由于then()接收的是上一个promise返回的结果,因此你无法通过链式写法将其连接起来。

Promise的完全实现

开发中Promise是及其常用的语法,基本上对于异步的处理大都是通过Promise来进行完成。Promise规范有很多,ES6最终采用的是Promise/A+ 规范,所以以下代码也基本是基于这个规范来进行编写的。

JS中Promise.reject()

es6中Promise.reject(reason)方法返回一个带有拒绝原因reason参数的Promise对象。该方法也会返回一个新的 Promise 实例,该实例的状态为rejected。

手写实现Promise的相关方法

Promise 作为 JS 社区的异步解决方案,为开发者提供了.then()、Promise.resolve()、Promise.reject()等基本方法。除此之外,为了更方便地组合和控制多个的 Promise 实例,也提供了.all()、.race()等方法。

Async/Await替代Promise的6个理由

Async/Await替代Promise的6个理由:Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕,而且提供了一个直观的替代方法。

Promise入门详解和基本用法

所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程。异步模式可以一起执行多个任务。

什么是 Promise.allSettled() !

Promise.allSettled() 方法返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise,并带有一个对象数组,每个对象表示对应的 promise 结果。

异步堆栈追踪:为什么 await 胜过 Promise?

与直接使用 Promise 相比,使用 async/await 不仅可以使代码更具可读性,而且还可以在 JavaScript 引擎中实现一些有趣的优化。这篇文章是关于一个这样的优化,涉及异步代码的堆栈追踪。

关于 Promise 的 9 个提示

你可以在 .then 里面 return 一个 Promise,每次执行 .then 的时候都会自动创建一个新的 Promise,对调用者来说,Promise 的 resolved/rejected 状态是唯一的,Promise 构造函数不是解决方案,使用 Promise.resolve

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!