再谈Promise
方法
构造函数
接受的参数是一个带两个Function参数的函数,实际的异步代码编写在这个函数里,成功后调用第一个参数,失败调用第二个;
Promise.prototype.catch
当构造函数里调用到失败的函数时,会执行该方法的参数,并传递错误信息;
Promise.prototype.then
当构造函数里调用到成功或者失败的函数时,会执行该方法的参数,并传递结果;
Promise.all
并行执行接受的数组,全部同时执行,直到全部都执行完毕,回调成功。
Promise.race
并行执行接受的数组,全部同时执行,最快的一个执行完毕后,回调成功。
private foo(time: number, data: string): Promise<string> {
return new Promise<string>((resolve: (value?: string)=> void, reject: (reason?: any) => void) => {
setTimeout(() => {
console.log("foo execute: " + data);
resolve(data);
}, time);
});
} Promise.race([this.foo(500, "1"), this.foo(300, "2"), this.foo(600, "3")]).then((value: string) => {
console.log("ok " + value);
}); // 输出如下:
// foo execute: 2
// ok 2
// foo execute: 1
// foo execute: 3
最快的执行后,后续的异步操作不会中断,也会继续执行。
Promise.reject
得到一个已经失败的Promise对象,并且可以传递失败消息;
Promise.resolve
得到一个已经成功的Promise对象,并且可以传递成功后的结果;
TypeScript下的Promise
TS下的Promise附带了一个泛型类型,如下Promise<T>,这里的T表示会传递给resolve的参数类型。
Promise的细节
直接上一个实例,我们先编写一个模拟的异步加载方法:
namespace Res {
/**
* 异步加载数据的方法
*/
export function loadRes(url: string): Promise<ResInfo> {
return new Promise<ResInfo>((resolve: (value?: ResInfo)=> void, reject: (reason?: any) => void) => {
// 这里不使用实际的加载代码,为了方便用 setTimeout 来模拟异步的加载操作
setTimeout(() => {
// 包含 err 字符串的地址都会加载失败
if (url.indexOf("err") != -1) {
reject("load error!");
return;
}
// 加载成功
let info = new ResInfo();
info.url = url;
info.data = Math.random() + "";
resolve(info);
}, 500);
});
}
} class ResInfo {
url: string;
data: any;
}
我们来看看下面的代码:
Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.6981821740164385"}
}).then((v) => {
console.log(v); // undefined
});
我们发现then方法在不返回新的Promise的时候,继续再次调用then方法,还是可以得到触发,这个触发在上一个then之后,但是已经取不到返回的值了。
如果希望第二个then也可以得到异步的返回值,可以这么写:
Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.7905235849704688"}
return Promise.resolve(v);
}).then((v) => {
console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.7905235849704688"}
});
直接返回值也可以让第二个then取到值:
Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.7905235849704688"}
return v;
}).then((v) => {
console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.7905235849704688"}
});
或者改变返回值:
Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.6981821740164385"}
return "hello";
}).then((v) => {
console.log(v); // hello
});
可以通过判断转变为一个异常抛出:
Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.6981821740164385"}
if (true) {
return Promise.reject("error 1000");
}
}).then((v) => {
console.log(v); // 这里已经不会被执行到了
}).catch((err) => {
console.log(err); // error 1000
});
async和await
async 的方法就可以看做一个封装好的 Promise 对象,调用该方法就会立刻得到一个 Promise 对象,该方法返回的值是 then 的成功回调的参数;
当需要对一个 async 方法或者返回 Promise 对象的方法进行异步等待时,就要加上 await 关键字,同时加了 await 关键字的方法要变成用 async 修饰的方法;
如果不加 await 关键字,就要使用 then 方法来监听异步的回调;
async 和 await 可以看做Promise的编写语法糖;
下面直接上实例:
private async loadAll(): Promise<string> {
console.log("加载前的初始化");
await Res.loadRes("http://xxx.xxx/common.zip");
console.log("加载通用资源成功");
let info = await Res.loadRes("http://xxx.xxx/ui.zip");
console.log("加载 " + info.url + "成功: " + info.data);
await Res.loadRes("http://xxx.xxx/code.zip");
console.log("最后一个资源加载成功"); return "complete";
} this.loadAll()
.then((result?: string) => {
console.log("加载全部完毕: " + result);
})
.catch((reason?: any) => {
console.log("加载失败: " + reason);
});
实际上就是Promise的简写形式,也更方便阅读和理解。
另外一些需要关注的细节
Promise的异步处理逻辑函数中立即调用resolve,是同步执行么?
我们来看下面的例子:
private foo() {
return new Promise((r:Function)=>{
console.log("2");
return r("resolve");
});
} console.log("1");
this.foo().then(()=>{
console.log("3");
});
console.log("4");
输出:
1
2
4
3
从输出来看调用了resolve之后,并没有立即触发then的回调,而是继续执行下面的方法(输出了4),之后才调用了then的回调(输出了3),所以立即返回后,并不是同步立即执行then的回调,但then的回调并没有等到下一个刷新(即下一帧)才调用,而是在本帧就会调用,只是调用放在本帧的稍后的时间里进行;
多个其它地方的then方法可以同时等待同一个Promise么?
目前为止,我们都是等待一个新创建的Promise,如果多个方法都在等待同一个Promise会怎么样,我们看看下面的例子:
private _p: Promise<any>; private foo1() {
return this._p;
} async foo2() {
await this.foo1();
console.log("foo2 1");
await this.foo1();
console.log("foo2 2");
await this.foo1();
console.log("foo2 3");
} async foo3() {
await this.foo1();
console.log("foo3 1");
await this.foo1();
console.log("foo3 2");
} this._p = new Promise((r:Function)=>{
setTimeout(()=>{
console.log("异步执行完毕");
return r("data");
},1000);
}); this.foo2().then(()=>{console.log("foo2 e");});
this.foo3().then(()=>{console.log("foo3 e");});
输出如下:
异步执行完毕
foo2 1
foo3 1
foo2 2
foo3 2
foo3 e
foo2 3
foo2 e
我们发现多个方法可以等待同一个Promise,该Promise成功或者失败时,所有等待该Promise的方法都会继续执行。
如果await一个已经执行完成的Promise时,会立即得到结束的执行。
Promise只会执行第一次的回调
当我500毫秒时,调用reject,1000毫秒时,调用resolve,then里面的方法是不会执行的。
function foo() {
return new Promise((resolve, reject) => {
setTimeout(()=>{
console.log("error");
reject();
}, 500);
setTimeout(()=>{
console.log("resolve");
resolve();
}, 1000);
});
} foo().then(()=>{
console.log("success");
})
.catch(()=>{
console.log("fail");
});
再谈Promise的更多相关文章
- 再谈 Promise
读完这篇文章,预计会消耗你 40 分钟的时间. Ajax 出现的时候,刮来了一阵异步之风,现在 Nodejs 火爆,又一阵异步狂风刮了过来.需求是越来越苛刻,用户对性能的要求也是越来越高,随之而来的是 ...
- [转载]再谈百度:KPI、无人机,以及一个必须给父母看的案例
[转载]再谈百度:KPI.无人机,以及一个必须给父母看的案例 发表于 2016-03-15 | 0 Comments | 阅读次数 33 原文: 再谈百度:KPI.无人机,以及一个必须 ...
- Support Vector Machine (3) : 再谈泛化误差(Generalization Error)
目录 Support Vector Machine (1) : 简单SVM原理 Support Vector Machine (2) : Sequential Minimal Optimization ...
- Unity教程之再谈Unity中的优化技术
这是从 Unity教程之再谈Unity中的优化技术 这篇文章里提取出来的一部分,这篇文章让我学到了挺多可能我应该知道却还没知道的知识,写的挺好的 优化几何体 这一步主要是为了针对性能瓶颈中的”顶点 ...
- 浅谈HTTP中Get与Post的区别/HTTP协议与HTML表单(再谈GET与POST的区别)
HTTP协议与HTML表单(再谈GET与POST的区别) GET方式在request-line中传送数据:POST方式在request-line及request-body中均可以传送数据. http: ...
- Another Look at Events(再谈Events)
转载:http://www.qtcn.org/bbs/simple/?t31383.html Another Look at Events(再谈Events) 最近在学习Qt事件处理的时候发现一篇很不 ...
- C++ Primer 学习笔记_32_STL实践与分析(6) --再谈string类型(下)
STL实践与分析 --再谈string类型(下) 四.string类型的查找操作 string类型提供了6种查找函数,每种函数以不同形式的find命名.这些操作所有返回string::size_typ ...
- 再谈JSON -json定义及数据类型
再谈json 近期在项目中使用到了highcharts ,highstock做了一些统计分析.使用jQuery ajax那就不得不使用json, 可是在使用过程中也出现了非常多的疑惑,比方说,什么情况 ...
- C++ Primer 学习笔记_44_STL实践与分析(18)--再谈迭代器【下】
STL实践与分析 --再谈迭代器[下] 三.反向迭代器[续:习题] //P355 习题11.19 int main() { vector<int> iVec; for (vector< ...
随机推荐
- List自定义排序(可多条件)
1:先建需要排序的属性Model package com.msqsoft.app.queuing.util; public class ListOrderByModel { private Strin ...
- 前面的内容 也是要去掉白名单 和 8.8.8.8这种非问题IP的 高风险 么? (目前我们没有获取客户的中风险、低风险数据,可以处理掉高风险)
前面的内容 也是要去掉白名单 和 8.8.8.8这种非问题IP的 高风险 么? (目前我们没有获取客户的中风险.低风险数据,可以处理掉高风险) == 整体把关.不清楚细节,所以只能从整体决策.做 ...
- tomcat修改端口号
以前只知道当tomcat端口号冲突了如何修改tomcat默认的8080端口号 今天遇到个情况,装了个BO,自带个tomcat,这时就需要修改三个地方 修改Tomcat的端口号: 在默认情况下,tomc ...
- 潭州课堂25班:Ph201805201 tornado 项目 第二课 项目 基本功能模块和 Git 使用 (课堂笔记)
tornado 相关说明 把图片显示在页面, 创建个 static 文件夹, 在这个文件下存放几张图片 在配置中指定静态文件路径, 在 html 文件中迭代出图片, 创建个包,重构 handlers ...
- pythonweb服务器编程(四)
Web动态服务器-1 #coding=utf-8 import socket import sys from multiprocessing import Process import re clas ...
- Linux命令行使用
FHS:标准文件架构规范用好man命令su - name 切换到用户namesu - rootchmod 777 filenamecd -:上一个工作目录cd ~:用户的家目录cd ~nid:q切换到 ...
- python字符串面试题:找出一个字符串中第一个字母和最后一个字符是第一次重复,中间没有重复且最长的子串
1.给出任意一个字符串,打印一个最长子串字符串及其长度,如果有相同长度的子字符串,都要一起打印出来,该子字符串满足以下条件, 第一个字母和最后一个字符是第一次重复 这个子字符串的中间字母没有重复 这个 ...
- Jupyter Notebook 快捷键和技巧
Jupyter Notebook 有两种键盘输入模式. 编辑模式,允许你往单元中键入代码或文本,这时的单元框线是绿色的. 命令模式,键盘输入运行程序命令:这时的单元框线是蓝色. 命令模式 ...
- CSS_盒子模型
2016-10-22 <css入门经典>第6章 1.每个HTML元素对应于一个显示盒子,但不是所有的元素都显示在屏幕上. 2.HTML元素显示为CSS显示盒子的真正方法称为“可视格式化方式 ...
- Nginx的https配置记录以及http强制跳转到https的方法梳理
一.Nginx安装(略)安装的时候需要注意加上 --with-http_ssl_module,因为http_ssl_module不属于Nginx的基本模块.Nginx安装方法: 1 2 # ./con ...