Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge about "how to realize Promise control asynchronous process". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations. I hope you can read carefully and learn something!

Title: There is an input box on the page, two buttons, button A and button B. Clicking A or B will send an asynchronous request respectively. After the request is completed, the result will be displayed in the input box.

The title requires that the user randomly click A and B multiple times, and when the input box is required to display the results, it is displayed according to the order of user click. For example:

The user clicks A once, then B once, then A again, and the input box displays the results in the order of A's asynchronous request, B's request, and A's request.

UI interface as shown in the figure:

这个需求该如何用promise来实现呢？代码如下：

//dom元素

var a = document.querySelector("#a")

var b = document.querySelector("#b")

var i = document.querySelector("#ipt");

//全局变量p保存promie实例

var P = Promise.resolve();

a.onclick = function(){

//将事件过程包装成一个promise并通过then链连接到

//全局的Promise实例上，并更新全局变量，这样其他点击

//就可以拿到最新的Promies执行链

P = P.then(function(){

//then链里面的函数返回一个新的promise实例

return new Promise(function(resolve,reject){

setTimeout(function(){

resolve()

i.value = "a";

},1000)

})

})

}

b.onclick = function(){

P = P.then(function(){

return new Promise(function(resolve,reject){

setTimeout(function(){

resolve()

console.log("b")

i.value = "b"

},2000)

})

})

}

我们用定时器来模拟异步请求，仔细于阅读代码我们发现，在全局我们定义了一个全局P，P保存了一个promise的实例。

然后再观察点击事件的代码，用户每次点击按钮时，我们在事件中访问全局Promise实例，将异步操作包装到成新的Promise实例，然后通过全局Promise实例的then方法来连接这些行为。

连接的时候需要注意，then链的函数中必须将新的promise实例进行返回，不然就会执行顺序就不正确了。

需要注意的是，then链连接完成后，我们需要更新全局的P变量，只有这样，其它点击事件才能得到最新的Promise的执行链。

这样每次用户点击按钮就不需要关心回调执行时机了，因为promise的then链会按照其连接顺序依次执行。

这样就能保证用户的点击顺序和promise的执行顺序一致了。

"Promise控制异步流程怎么实现"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.