博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Promise 学习笔记 - 时间支配者
阅读量:6612 次
发布时间:2019-06-24

本文共 2453 字,大约阅读时间需要 8 分钟。

本文同步自我的个人博客:

JavaScript 的 promises 事实标准称为 。ES6 的 Promise API 便遵循这个标准。

promises 的英文直译是“承诺,诺言”。但是在大神的《》文章里得知,
而是应该根据其音译——“普罗米修斯”,来翻译。普罗米修斯是希腊神话故事中的英雄,名字的意思是“先知”。

回调地狱

好了,我就不讲那些学术化的东西了,直接进入正题,来个实际的例子比什么都强。

例如我们有3个 ajax 请求,需要按照顺序加载。

$.get("/url1", function (data) {    // 一些处理    $.get("/url2", function (data) {        // 一些处理        $.get("/url3", function (data) {            // 最终处理        });    });});

非常熟悉的画面,那如果请求增加到10个,甚至更多,会发生什么呢?

The callback hell!

这幅图非常直观形象的展示了回调地狱。

时间支配 - 按顺序调度

为了避免回调地狱的发生,就需要 Promise 出马来合理的支配我们的任务时间。

首先需要学习下第一个 api,具体参阅 文档。
其实非常简单,就是用 Promise 包装下 ajax 请求即可,代码如下。

// 用 Promise 包装 get 请求function myGet(url) {    return new Promise(function(resolve, reject) {        $.get(url, resolve);    });}myGet('/url1').then(function (data) {    // 一些处理,data为返回值    return myGet('/url2');}).then(function (data) {    // 一些处理    return myGet('/url3');}).then(function (data) {    // 最终处理});

这样就可以按顺序写 ajax 调用了,不会陷入无尽的回调之中。

如果你熟悉 jquery,那么你一定知道 Deferred,它实现了类似 Promise 的东西。

$.get("/url1").then(function (data) {    // 一些处理,data为返回值    return $.get("/url2");}).then(function (data) {    // 一些处理    return $.get("/url3");}).then(function (data) {    // 最终处理});

这样看着简洁多了,虽然 Deferred 和 Promise 实现方法不一样,但是他们的结果是一致的。

时间支配 - 异步并发

大家都知道 ajax 异步请求是没有返回顺序的,发了3个请求,有可能是1,2,3的返回,也有可能是3,1,2的返回顺序。

那我不想按顺序请求,而是并发请求,但是在最终所有请求完成后执行一段操作。
比如页面所有数据都加载完后隐藏 loading 层。

这个时候,需要用到一个新方法 ,其实很简单,它接受一个 promise 数组最为参数。

function myGet(url) {    return new Promise(function(resolve, reject) {        $.get(url, resolve);    });}var arr = [];arr.push(myGet('/url1'));arr.push(myGet('/url2'));arr.push(myGet('/url3'));Promise.all(arr).then(function (datas) {    // 最终处理,datas 是所有返回结果的数组    console.log("返回数据为", datas);});

感觉比刚才的按顺序还要清爽,有木有。其实 jquery 也有类似的功能,而且用起来超爽的。

$.when($.get('/url1'), $.get('/url2'), $.get('/url3')).then(function (data1, data2, data3) {    // 最终处理    console.log("返回数据为", data1, data2, data3);});

虽然形式有点怪异,不过调整下就OK了。

var arr = [];arr.push($.get('/url1'));arr.push($.get('/url2'));arr.push($.get('/url3'));$.when.apply(null, arr).then(function () {    // 最终处理    console.log("返回数据为", arguments);});

利用 apply 来展开参数,代码看着舒服多了,跟上面的 Promise.all 是一样一样的。

结束语

本文本是我在一边学习测试一边写的,例子都跑过OK的,通篇下来后,对 Deferred 和 Promise 有了一定认识,

虽然并不一定透彻,至少比起以前好多了。

为什么叫它为 时间支配者 呢,一开始没这样的想法,写到一半的时候发现确实可以合理的支配异步的时间调度问题。

异步操作最大的特点就是时间的不确定性,所以正常情况下很难流畅的书写简单而有逻辑性的代码。

比如按顺序的异步,虽然可以合理的回调,但是会陷入回调地狱,再如并发异步呢?

并发异步,也许你要设置一个全局变量来记次,最后一个完成的,要触发下完成后的任务。
这样虽然也可以实现,但是代码会显的臃肿而又凌乱。

但是有了 Promise 的帮助,这一切变的这么简单,自然。

转载地址:http://qzaso.baihongyu.com/

你可能感兴趣的文章
如何在 Android 手机上安装 Ubuntu 13.04
查看>>
HDU 6073 - Matching In Multiplication | 2017 Multi-University Training Contest 4
查看>>
C语言 scanf()和gets()函数的区别
查看>>
如何检测域名是否被微信屏蔽 微信域名检测接口API是如何实现
查看>>
POJ1611-The Suspects
查看>>
Linux下安装Python-3.3.2【转】
查看>>
LeetCode OJ:Merge Two Sorted Lists(合并两个链表)
查看>>
功能测试
查看>>
【BZOJ 1901】Dynamic Rankings
查看>>
阿里架构师都在学的知识体系
查看>>
PAT (Advanced Level) 1028. List Sorting (25)
查看>>
【转】聚集索引和非聚集索引的区别
查看>>
【转】mac os 安装php
查看>>
C# DllImport的用法
查看>>
Github-Client(ANDROID)开源之旅(二) ------ 浅析ActionBarSherkLock
查看>>
no identities are available for signing
查看>>
eclipse中如何去除警告:Class is a raw type. References to generic type Class<T> should be parameterized...
查看>>
Gradle脚本基础全攻略
查看>>
Django模版中的过滤器详细解析 Django filter大全
查看>>
Linux中使用pwconv实现passwd中密码到shadow
查看>>