您好,欢迎来到优显汽车网。
搜索
您的当前位置:首页

Promise简化回调实例分享

2022-06-15 来源:优显汽车网
摘要
在上一篇文章里面,我们实现了一个简单的 Promise ,已可以满足一些较简单的场景。但却无法进行then的Promise链式衔接,比如这样:这种场景相信用过 promise 的人都知道会有很多,那么类似这种就是所谓的 链式Promise 。链式Promise是指在当前promise达到 fulfilled 状态后,即开始进行下一个promise(后邻promise)。那么我们如何衔接当前promise和后邻promise呢?(这是这里的难点)。只需在then方法里面return一个promis

本文主要和大家分享微信小程序:使用Promise简化回调实例分享,希望能帮助到大家。

了解什么是 Promise 对象

在项目中,会出现各种异步操作,如果一个异步操作的回调里还有异步操作,就会出现回调金字塔。

比如下面这种

// 模拟获取code,然后将code传给后台,成功后获取userinfo,再将userinfo传给后台// 登录wx.login({ success: res => { let code = res.code // 请求 imitationPost({ url: '/test/loginWithCode', data: { code }, success: data => { // 获取userInfo wx.getUserInfo({ success: res => { let userInfo = res.userInfo // 请求 imitationPost({ url: '/test/saveUserInfo', data: { userInfo }, success: data => { console.log(data) }, fail: res => { console.log(res) } }) }, fail: res => { console.log(res) } }) }, fail: res => { console.log(res) } }) }, fail: res => { console.log(res) }})

下面分析如何用Promise来进行简化代码

因为微信小程序异步api都是success和fail的形式,所有有人封装了这样一个方法:

promisify.js

module.exports = (api) => { return (options, ...params) => { return new Promise((resolve, reject) => { api(Object.assign({}, options, { success: resolve, fail: reject }), ...params); }); }}

先看最简单的:

// 获取系统信息wx.getSystemInfo({ success: res => { // success console.log(res) }, fail: res => { }})使用上面的promisify.js简化后:const promisify = require('./promisify')const getSystemInfo = promisify(wx.getSystemInfo)getSystemInfo().then(res=>{ // success console.log(res)}).catch(res=>{})

可以看到简化后的回调里少了一个缩进,并且回调函数从9行减少到了6行。

回调金字塔的简化效果

那么再来看看最开始的那个回调金字塔

const promisify = require('./promisify')const login = promisify(wx.login)const getSystemInfo = promisify(wx.getSystemInfo)// 登录login().then(res => { let code = res.code // 请求 pImitationPost({ url: '/test/loginWithCode', data: { code }, }).then(data => { // 获取userInfo getUserInfo().then(res => { let userInfo = res.userInfo // 请求 pImitationPost({ url: '/test/saveUserInfo', data: { userInfo }, }).then(data => { console.log(data) }).catch(res => { console.log(res) }) }).catch(res => { console.log(res) }) }).catch(res => { console.log(res) })}).catch(res => { console.log(res)})

可以看到简化效果非常明显。

同样适用于网页或者nodejs等中。

小编还为您整理了以下内容,可能对您也有帮助:

Promise的简易实现(2)

在上一篇文章里面,我们实现了一个简单的 Promise ,已可以满足一些较简单的场景。但却无法进行then的Promise链式衔接,比如这样:

这种场景相信用过 promise 的人都知道会有很多,那么类似这种就是所谓的 链式Promise 。

链式Promise是指在当前promise达到 fulfilled 状态后,即开始进行下一个promise(后邻promise)。那么我们如何衔接当前promise和后邻promise呢?(这是这里的难点)。

只需在then方法里面return一个promise就好啦。可见Promises/A+规范中的2.2.7
Promise/A+规范

1.then方法中,创建并返回了新的Promise实例,这是串行Promise的基础,并且支持链式调用。
2.handle方法是promise内部的方法。then方法传入的形参onFulfilled以及创建新Promise实例时传入的resolve均被push到当前promise的callbacks队列中,这是衔接当前promise和后邻promise的关键所在(这里一定要好好的分析下handle的作用)。
3.testAsyncFunc1生成的promise(简称testPromise1)异步操作成功,执行其内部方法resolve,传入的参数正是异步操作的结果123
4.调用handle方法处理callbacks队列中的回调:testAsyncFunc2 方法,生成新的promise(testAsyncFunc2 promise)
5.执行之前由testAsyncFunc1 promise的then方法生成的新promise(称为bridge promise)的resolve方法,传入参数为testAsyncFunc1 promise。这种情况下,会将该resolve方法传入testAsyncFunc2 promise的then方法中,并直接返回。
6/在testAsyncFunc2 promise异步操作成功时,执行其callbacks中的回调:testAsyncFunc1 bridge promise中的resolve方法
7.最后执行testAsyncFunc1 bridge promise的后邻promise的callbacks中的回调。

// 关键tip-2
1: 链式 promise 之间有一个桥梁 promise ,可称之为 bridge promise ,用于衔接两个 promise ,包装在 then 函数中 2: 当前一个 promise resolve 之后, bridge promise 负责传递之前 promise 的值
3: 将当前 promise 的值和 bridge promise 的 resolve 方法传给下一个 promise 之后,在下一个 promise resolve 的时候,执行 bridge promise 的 resolve 方法,再执行本身后注册的 then 函数中的 promise resolve
4: 执行完四个 promise(promise 1 - getUserId, promise 2 - getUserId bridge, promise 3 - getUserInfoById, promise 4 - getUserInfoById bridge) 之后,继续执行后面的 then 函数

Promise的简易实现(2)

在上一篇文章里面,我们实现了一个简单的 Promise ,已可以满足一些较简单的场景。但却无法进行then的Promise链式衔接,比如这样:

这种场景相信用过 promise 的人都知道会有很多,那么类似这种就是所谓的 链式Promise 。

链式Promise是指在当前promise达到 fulfilled 状态后,即开始进行下一个promise(后邻promise)。那么我们如何衔接当前promise和后邻promise呢?(这是这里的难点)。

只需在then方法里面return一个promise就好啦。可见Promises/A+规范中的2.2.7
Promise/A+规范

1.then方法中,创建并返回了新的Promise实例,这是串行Promise的基础,并且支持链式调用。
2.handle方法是promise内部的方法。then方法传入的形参onFulfilled以及创建新Promise实例时传入的resolve均被push到当前promise的callbacks队列中,这是衔接当前promise和后邻promise的关键所在(这里一定要好好的分析下handle的作用)。
3.testAsyncFunc1生成的promise(简称testPromise1)异步操作成功,执行其内部方法resolve,传入的参数正是异步操作的结果123
4.调用handle方法处理callbacks队列中的回调:testAsyncFunc2 方法,生成新的promise(testAsyncFunc2 promise)
5.执行之前由testAsyncFunc1 promise的then方法生成的新promise(称为bridge promise)的resolve方法,传入参数为testAsyncFunc1 promise。这种情况下,会将该resolve方法传入testAsyncFunc2 promise的then方法中,并直接返回。
6/在testAsyncFunc2 promise异步操作成功时,执行其callbacks中的回调:testAsyncFunc1 bridge promise中的resolve方法
7.最后执行testAsyncFunc1 bridge promise的后邻promise的callbacks中的回调。

// 关键tip-2
1: 链式 promise 之间有一个桥梁 promise ,可称之为 bridge promise ,用于衔接两个 promise ,包装在 then 函数中 2: 当前一个 promise resolve 之后, bridge promise 负责传递之前 promise 的值
3: 将当前 promise 的值和 bridge promise 的 resolve 方法传给下一个 promise 之后,在下一个 promise resolve 的时候,执行 bridge promise 的 resolve 方法,再执行本身后注册的 then 函数中的 promise resolve
4: 执行完四个 promise(promise 1 - getUserId, promise 2 - getUserId bridge, promise 3 - getUserInfoById, promise 4 - getUserInfoById bridge) 之后,继续执行后面的 then 函数

回调函数的使用(第二个函数需要第一个函数出结果后再调用)

例如:进入某个页面,需要先登录调用login()函数,拿到用户信息之后,再调取用户商品信息getInfo()函数,用Promise实现:

var promise = new Promise((resolve, reject) => {

  this.login(resolve)

})

.then(() => this.getInfo())

.catch(() => { console.log("Error") })

async函数,使得异步操作变得更加方便,下面我们用async来实现:

async function asyncFunc(params) {

  const result1 = await this.login()

  const result2 = await this.getInfo()

}

顺序处理多个异步结果:

async function asyncFunc() {

  const result1 = await otherAsyncFunc1();

  console.log(result1);

  const result2 = await otherAsyncFunc2();

  console.log(result2);

}

并行处理多个异步结果:

async function asyncFunc() {

  const [result1, result2] = await Promise.all([

    otherAsyncFunc1(),

    otherAsyncFunc2()

  ]);

  console.log(result1, result2);

}

优显汽车网还为您提供以下相关内容希望对您有帮助:

回调函数的使用(第二个函数需要第一个函数出结果后再调用)

例如:进入某个页面,需要先登录调用login()函数,拿到用户信息之后,再调取用户商品信息getInfo()函数,用Promise实现:var promise = new Promise((resolve, reject) => {   this.login(resolve)}).then(() =>...

Promise的简易实现(2)

1.then方法中,创建并返回了新的Promise实例,这是串行Promise的基础,并且支持链式调用。2.handle方法是promise内部的方法。then方法传入的形参onFulfilled以及创建新Promise实例时传入的resolve均被push到当前promise的callbacks队列...

这段es6 JavaScript代码应该怎么理解呢?关于promise的

这段 ES6 JavaScript 代码展示了一个关于 Promise 链的例子。在这个例子中,一个简单的错误导致了 Promise 链的中断,使得 p4 与 p2 和 p3 同时进行。让我们先理解这段代码。首先,创建了一个名为 p1 的新 Promise,并...

帮你弄懂Promise原型方法then、catch、finally

另外提一下 Promise 构造函数上实现了 all , race , reject , resolve , allSettled , any 方法,==这些方法只属于 Promise 构造函数自己,是不能在实例中被调用的==(也就是只会以这种形式出现:如 Pro...

Promise.all()使用方法

对于异步回调,首先想到的就会是使用Promise封装,然后使用.then()来触发回调。那么对于两个或多个异步事件均完成后再触发回调可以使用Promise.all()方法。Promise.all(iterable)** 方法返回一个 Promise 实例,此实例...

以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题_jquery...

一、封装异步操作首先,我们以加载图片为例,看以下代码:以上的代码,我封装了图片加载的操作,将他们委托给$.Deferred,最后生成一个promise返回。使用这样的方式,相比用对外暴露回调的方式,显得更干净、更清晰。这么做的另...

Promise的用法以及作用

方法一:第一种写法是用async函数来写。  方法二:第二种写法是使用new Promise()。p.try()就是解决以上的执行方式的痛点 Promise.try 为所有操作提供了统一的处理机制,所以如果想用 then ...

jQuery的Promise如何正确使用

打开浏览器的控制台先。运行结果: 和ES6的Promise对象长的有点像,jQuery的Deferred对象也有resolve、reject、then方法,还有done、fail、always...方法。jQuery就是用这个Deferred对象来注册异步操作的回调函数,修改并传递异步操...

如何把回调函数的返回值promise化

1.promise构造函数中要实现异步对象状态和回调函数的剥离,并且分离之后能够还能使回调函数正常执行 2.如何实现链式调用并且管理状态 首先是构造函数://全局宏定义 var PENDING = 0;var FULFILLED = 1;var REJECTED = 2;/...

如何拿到多层的promise中的数据

Promise的构造函数接收一个参数:函数,并且这个函数需要传入两个参数:resolve :异步操作执行成功后的回调函数 reject:异步操作执行失败后的回调函数 then 链式操作的用法 所以,从表面上看,Promise只是能够简化层层回调的写法...

上一篇:Bootstrap实现表格合并单元格示例

下一篇:JavaScript实现99乘法表代码

Top