Promise使用时应注意的问题

时间: 2018-11-19阅读: 1199标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

手写实现Promise的相关方法

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

Promise 的then 里发生了什么

首先来分析一下then then是属于实例上的方法 参数有2个,分别为onFulfilled, onRejected,并且都是可选的、可以实现链式调用、then执行要执行Promise onFulfilled 或者 onRejected 方法、参数onFulfilled,onRejected 分别有自己的参数, 分别是resolve的参数跟reject的参数、then只能使用前一个then的返回值、then返回值不能是同一个promise

Promise中.all(), .race(), .allSettled()

从ES6 开始,我们大都使用的是 Promise.all()和Promise.race(),Promise.allSettled() 提案已经到第4阶段,因此将会成为ECMAScript 2020的一部分。Promise.all<T>(promises: Iterable<Promise<T>>): Promise<Array<T>>

实现简易版Promise

下面我们一边分析,一边实现自己的promise。首先Promise是一个构造方法,并且初始化的时候传入了一个函数作为参数,then方法很明显可以看出是Promise的实例方法,并且可以实现链式调用

es6 Promise 的基础用法

想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行

Js Promise的并行和串行

Promise.all是所有的Promise执行完毕后(reject|resolve)返回一个Promise对象。最近在开发一个项目中,需要等接口拿到全部数据后刷新页面,取消loding效果

从 callback 到 promise

说起回调(callback),那可以说是 JS 最基础的异步调用方式,是 JS 为解决阻塞请求而量身定制出的一种设计模式,在 JS 或是说前端大潮中有着举足轻重的影响

你真的懂Promise吗

在异步编程中,Promise 扮演了举足轻重的角色,比传统的解决方案(回调函数和事件)更合理和更强大。可能有些小伙伴会有这样的疑问:2020年了,怎么还在谈论Promise?

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

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

Promise 使用、原理以及实现过程

promise 是目前 JS 异步编程的主流解决方案,遵循 Promises/A+ 方案。promise 对象原型上有一个 then 方法,then 方法会返回一个新的 promise 对象,并且将回调函数 return 的结果作为该 promise resolve 的结果

点击更多...

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