关闭

Promise使用时应注意的问题

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

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

Async/Await替代Promise的6个理由

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

为promise增加abort功能

Promise只有三种状态:pending、resolve、reject,一个异步的承诺一旦发出,经历等待(pending)后,最终只能为成功或者失败,中途无法取消(abort)。

如何使用Promise.race() 和 Promise.any() ?

自1996年发布以来,JS 一直在稳步改进。随着ECMAScript版本的许多改进,最近的版本是ES2020。JS 的一个重要更新是Promise,在2015年,它以 ES6 的名义发布。

Promise.resolve()详解

Promise.resolve等价于下面的写法,有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。Promise.resolve方法的参数分成四种情况。那么 then 返回的 Promise 将会成为接受状态(resolve)

Promise 原理解析与实现(遵循Promise/A+规范)

Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一,Promise 是一个构造函数, new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数

ES6入门之Promise对象

Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理、更强大。简单来说就是一个容器,里面保存着某个未来才会结束的事件(也就是异步操作)的结果。从语法上来讲,Promise是一个对象

这样理解 promise

官网解释 promise 表示一个异步操作的最终结果。翻译 ==可以将promise理解为一个状态机==,它存在三种不同的状态,并在某一时刻只能有一种状态,一个promise是对一个异步操作的封装

Anti-promise Promise反模式

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

手写Promise实现过程

实现Promise的核心功能,判断下当执行器里面时异步代码时的回调函数调用情况,then方法多次调用的情况,then方法的链式调用,以及如何把then方法的返回值传递到下一个then方法中,再判断返回值是普通值还是peomise对象进而进一步处理

Promise对象 3 种妙用

作为一个前端,说不了解 Promise 对象用法的基本不存在,这里就不对功能用法进行介绍了。但本文将会讲述你可能不知道的 Promise 3 种奇妙用法。当然,每种用法都会有其适用的特殊场景。

点击更多...

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