使用Promise模式来简化javascript的异步回调

2023-10-26 分类：网站建设

百度权重查询站长交易友情链接交换网站监控服务器监控 seo监控

网页的交互越来越复杂，javascript 的异步操作也随之越来越多。如常见的 ajax 请求，需要在请求完成时响应操作，请求通常是异步的，请求的过程中用户还能进行其他的操作，不会对页面进行壅塞，这种异步的交互效果对用户来说是挺有友爱的。但是对于开发者来说，要大量处理这种操作，就很不友爱了。异步请求完成的操作必须预先定义在回调函数中，等到请求完成就必须调用这个函数。这种非线性的异步编程体例会让开发者很不适应，同时也带来了诸多的未便，增添了代码的耦合度和复杂性，代码的组织上也会很不优雅，大大降低了代码的可维护性。情况再复杂点，假如一个操作要等到多个异步 ajax 请求的完成才能进行，就会出现回调函数嵌套的情况，假如需要嵌套好几层，那你就只能自求多福了。

先看看下面这个常见的异步函数。

var showMsg = function（）{
setTimeout（function（）{
alert（ ‘hello’ ）;
}， 5000 ）;
};

假如要给该函数添加回调，通常会这么干。

var showMsg = function（ callback ）{
setTimeout（function（）{
alert（ ‘hello’ ）;
// 此处添加回调
callback（）;
}， 5000 ）;
};

假如是使用 easy.js 的 Promise，添加回调的方法就会优雅多了，前提是需要将原函数封装成一个 promise 实例。

var showMsg = function（）{
// 构造promise实例
var promise = new E.Promise（）;
setTimeout（function（）{
alert（ ‘hello’ ）;
// 改变promise的状况
promise.resolve（ ‘done’ ）;
}， 5000 ）;
// 返回promise实例
return promise;
};

将一个通俗的函数封装成一个 promise 实例，有3个关键步骤，步是在函数内部构造一个 promise 实例，第二步是部署函数执行完去改变 promise 的状况为已完成，第三步就是返回这个 promise 实例。每个 promise 实例都有3种状况，分别为 pending(未完成)、resolved(已完成，成功)、rejected(已拒绝，失败)。下面再来看看如何添加回调。

showMsg（）.then（function（ str ）{
// 回调添加到这里来了
callback（ str ）;
}）;

这样就将回调函数和原来的异步函数彻底的星散了，从代码组织上看，优雅了许多。resolve 接受一个参数，该参数就可以轻松实现将数据传送给使用 then 方法添加的回调中。

对于 ajax 请求，easy.js 直接将 ajax 方法封装成了 promise 对象，可以直接添加 then 方法往返调。

E.ajax（{
url ： ‘test1.php’，
type ： ‘GET’
}）
then（function（）{
// 添加请求成功的回调
}， function（）{
// 添加请求失败的回调
}）;

then 方法接受2个函数作为参数，个函数是已完成的回调，第二个就是已失败的回调。

假如有上面提到的多个 ajax 请求的情况呢？那么就要用到 when 这个方法了。该方法可以接受多个 promise 实例作为参数。

var requests = E.when（E.ajax（{
url ： ‘test1.php’，
type ： ‘GET’
}）， E.ajax（{
url ： ‘test2.php’，
type ： ‘GET’
}））;
requests.then（function（ arg1， arg2 ）{
console.log（ ‘success：’ + arg1［0］ + arg2［0］）;
}， function（ arg1， arg2 ）{
console.log（ ‘failure：’ + arg1 + arg2 ）;
}）;

when 方法是将多个 promise 实例存到一个数组中，等到该数组的所有 promise 实例都是已完成状况才去执行已完成的回调，一旦有一个实例是已拒绝的状况，则立即执行已拒绝的回调。

Promise 模式是 CommonJS 的规范之一。许多主流的 javascript 库都有响应的实现，如 jQuery 和 Dojo 中，都有 Deferred 去实现这些功能。在这里照旧要吐槽下 jQuery 的 Deferred，撇开其内部使用，这应该用户使用率好低的一个模块了，这和其较复杂的使用体例有一定的关系。

假如你想深入的研究 easy.js 的 promise 源码，可以查看点击这儿的链接。

文章来源：夜雨带刀博客

当前标题：使用Promise模式来简化javascript的异步回调
本文路径：https://www.cdcxhl.com/news5/287955.html

成都网站建设公司_创新互联，为您提供静态网站、ChatGPT、域名注册、响应式网站、App设计、关键词优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容