关闭

Promise使用时应注意的问题

时间: 2018-11-19阅读: 1372标签: 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。首先Promise是一个构造方法,并且初始化的时候传入了一个函数作为参数,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>>

JavaScript 的 Async/Await 完胜 Promise 的六个理由

提醒一下各位,Node 现在从版本 7.6 开始就支持 async/await 了。如果你还没有试过它,这里有一堆带有示例的理由来说明为什么你应该马上采用它,并且再也不会回头。

Promise 对象的理解

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象。

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

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

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对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值

ES6之Promise

所谓的 promise,简单的来说就是一个容器,里面保存着某个未来才会结束的事件(也就是我们的异步操作)的结果。从语法上面来说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

Promise原理探究及实现

作为ES6处理异步操作的新规范,Promise一经出现就广受欢迎。面试中也是如此,当然此时对前端的要求就不仅仅局限会用这个阶段了。下面就一起看下Promise相关的内容。还是简单回顾下Promise是什么以及怎么用

你真的了解 Promise 吗?Promise 必知必会(十道题)

Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。

点击更多...

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