22.TypeScript异步编程
liuian 2024-12-04 13:46 49 浏览
22.TypeScript异步编程
基于 JavaScript 的异步运行机制，主要的异步编程模式包括：
- 回调函数
- Promise 对象（ECMAScript 6）
- async/await 语法（ECMAScript 7）
22.1回调函数
回调函数就是被 JavaScript 主线程挂起且暂时不执行的代码。
当非 JavaScript主线程执行完任务后，会将结果以事件通知的形式存放到 JavaScript 任务队列中，任务队列中的事件将指明具体调用哪个回调函数。当 JavaScript 主线程的同步代码执行完毕后，就会获取任务队列中的事件，调用与之相关的回调函数。
22.1.1一般的异步任务
下面先安装 Request 框架，该框架只能在 Node.js 中执行，执行如下命令：
npm install -g requestrequest() 函数需要传入的两个参数：url 和返回结果后调用的回调函数。如：
import * as request from "request"
request('http://www.baidu.com', function(error, response, body){
if (!error && response.statusCode == 200) {
console.log(body);
}
});
let a = 'hello';
console.log(a);输出：
hello
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta content="always" name="referrer"><meta name="description" content="全球领先的中文
搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。">
......从上面的执行结果可以看到，程序先输出了 hello，然后才输出请求 url 的结果。
回调函数也可以写成一般的函数，如上面的代码也可以写成如下代码：
import * as request from "request"
function receiveResponse(error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body);
}
}
request('http://www.baidu.com', receiveResponse);
let a = 'hello';
console.log(a);在实际项目中，经常会遇到某个业务需要连续调用多个 API，每个 API 都要从上一个 API 中获取数据，如果采用这样的方式，就会出现回调灾难：代码充满了嵌套结构，不仅在纵向增长，也在横向增长。对于代码调试和维护都相当困难。
22.1.2计时器
在 TypeScript 中可以通过 setTimeout 和 setInterval 计时器，在指定时间间隔后执行回调函数。
1.setTimeout()
该函数用于在指定时间间隔后执行一段代码。参数包括：
- 回调函数
- 需要等待的时间间隔（单位为毫秒），如果指定的时间间隔为 0，表示不等待，立即执行。
- 回调参数
如：
let myGreeting = setTimeout(function () {
console.log('Hello world.');
}, 2000);
console.log('Main thread executed');输出：
Main thread executed
Hello world. // 2秒后输出的内容回调函数也可以使用常规声明的函数，如上面的代码也可以写成如下代码：
function sayHello() {
console.log('Hello world.');
}
let myGreeting = setTimeout(sayHello, 2000);
console.log('Main thread executed');回调函数也可以声明参数，在 setTimeout() 函数的末尾指定回调参数值。如：
function sayHello(name: string) {
console.log(`Hello ${name}.`);
}
let myGreeting = setTimeout(sayHello, 2000, 'Rose');
console.log('Main thread executed');输出：
Main thread executed
Hello Rose.使用 clearTimeout() 函数清除已定义的定时器，参数为定时器变量。如：
function sayHello(name: string) {
console.log(`Hello ${name}.`);
}
let myGreeting = setTimeout(sayHello, 2000, 'Rose');
console.log('Main thread executed');
clearTimeout(myGreeting);输出：
Main thread executed2.setInterval()
该函数用于每隔一定的时间间隔后重复执行一段代码。其使用方法与 setTimeout() 函数完全相同。区别是 setTimeout() 函数只执行一次回调，而 setInterval() 函数是每隔一段时间执行一次回调，直到计时器销毁为止。如：
function sayHello(name: string) {
console.log(`Hello ${name}.`);
}
let myGreeting = setInterval(sayHello, 2000, 'Rose');
console.log('Main thread executed');输出：
Main thread executed
Hello Rose.
Hello Rose.
Hello Rose.
......使用 clearInterval() 函数清除已定义的计时器，参数为定时器变量。如：
function sayHello(name: string) {
console.log(`Hello ${name}.`);
}
let myGreeting = setInterval(sayHello, 2000, 'Rose');
console.log('Main thread executed');
clearInterval(myGreeting);输出：
Main thread executed22.2 Promise 对象
22.2.1声明 Promise 对象
Promise 对象可以用于封装异步操作，实例化 Promise 对象的语法格式：
let 对象名 = new Promise(封装异步操作的自定义函数);Promise 对象的 3 中状态：
- pending - 初始状态，异步任务执行中
- resolved - 异步任务执行成功
- rejected - 异步任务执行失败
封装异步操作的自定义函数必须为如下类型：
(
resolve: (value: unknown) => void,
reject: (reason: any) => void
) => void;resolve() 函数和 reject() 函数是在 Promise 对象执行期间调用封装异步操作的自定义函数时传入的内置函数。分别为自动函数内的异步任务执行成功和执行失败时调用的函数。
如：对上面的 request 封装如下
import * as request from "request"
function GetHttpResponse(url) {
return new Promise((resolve, reject) => {
request(url, function(error, response, body){
if (!error) {
if (response.statusCode == 200) {
resolve(body);
} else {
reject(`http status code is ${response.statusCode}`);
}
} else {
reject(error);
}
});
})
}
GetHttpResponse('http://www.baidu.com').then((body) => {
console.log(body);
});编译：
tsc .\demo.ts --target esnext --module commonjs连续调用，如：
import * as request from "request"
function GetHttpResponse(url) {
return new Promise((resolve, reject) => {
request(url, function(error, response, body){
if (!error) {
if (response.statusCode == 200) {
resolve(body);
} else {
reject(`http status code is ${response.statusCode}`);
}
} else {
reject(error);
}
});
})
}
GetHttpResponse('http://www.baidu.com').then((body) => {
console.log('baidu');
console.log(body);
return GetHttpResponse('http://www.sina.com.cn');
}).then((body) => {
console.log('sina');
console.log(body);
return GetHttpResponse('http://www.sohu.com');
}).then((body) => {
console.log('sohu');
console.log(body);
return GetHttpResponse('http://www.qq.com');
}).then((body) => {
console.log('qq');
console.log(body);
});在上面的代码中，then() 方法中返回一个新的 Promise 对象，因此可以接着调用这个新的 Promise 对象的 then() 方法，以流式编程风格，形成自上而下的调用链。
22.2.2 Promise 错误处理
Promise 对象的另一个方法是 catch() 方法，该方法在自定义函数调用 reject() 或 then() 方法且内部产生错误时才执行。
- 当在自定义函数中调用 reject()，catch() 方法将接收到在自定义函数中传给内置函数 reject() 的参数；
- 当 then() 方法出错时，catch() 方法将接收到 then() 方法中产生的 error 对象；
- catch() 方法返回的也是一个新的 Promise 对象，当 catch() 方法内的没有明确返回新的 Promise 对象时，会自动返回一个空的 Promise 对象，确保后续能够持续调用 Promise 对象的方法。
如：
import * as request from "request"
function GetHttpResponse(url): Promise<(resolve: ()=>void, reject: ()=>void)=>void> {
return new Promise((resolve, reject) => {
request(url, function(error, response, body){
if (!error) {
if (response.statusCode == 200) {
resolve(body);
} else {
reject(`http status code is ${response.statusCode}`);
}
} else {
reject(error);
}
});
})
}
GetHttpResponse('http://xxxxx').then((body) => {
console.log(body);
}).catch((error) => {
console.log(error.name);
console.log(error.message);
})输出：
Error
getaddrinfo ENOTFOUND xxxxx使用 catch() 方法不仅可以处理 reject() 内置函数中的错误，还可以处理 then() 方法中产生的错误。如：
GetHttpResponse('http://www.baidu.com').then((body) => {
throw new Error('出错了!')
console.log(body);
}).catch((error) => {
console.log(error.name);
console.log(error.message);
})输出：
Error
出错了!对于连续的调用，catch() 方法可以捕获前面的任何 then() 方法中产生的错误。
catch() 方法之后也会返回 Promise 对象，因此，可以在 catch() 方法之后继续调用 then() 方法。
22.2.3 finally() 方法
在异步操作中，可能会存在一些最终必须执行的代码，如释放资源或清理操作的代码等。可以使用 finally() 方法，将必须执行的代码放置在 finally() 方法中。如：
GetHttpResponse('http://www.baidu.com').then((body) => {
console.log('baidu');
console.log(body);
return GetHttpResponse('http://xxxxx');
}).then((body) => {
console.log('sina');
console.log(body);
return GetHttpResponse('http://www.sohu.com');
}).then((body) => {
console.log('sohu');
console.log(body);
return GetHttpResponse('http://www.qq.com');
}).then((body) => {
console.log('qq');
console.log(body);
}).catch((error: Error) => {
console.log(error.name);
console.log(error.message);
}).finally(() => {
console.log('finished.');
})22.2.4组合 Promise 对象
可以将多个 Promise 对象组合成一个新的 Promise 对象。然后通过 Promise.all() 静态方法进行调用。all() 方法的参数为 Promise 对象数值，返回值为新的 Promise 对象。只有当数组中的所有 Promise 对象执行成功并变成 resolve 状态后，这个新的 Promise 对象才能执行 then() 方法中的代码。如：
import * as request from "request"
function GetHttpResponse(url): Promise<(resolve: ()=>void, reject: ()=>void)=>void> {
return new Promise((resolve, reject) => {
request(url, function(error, response, body){
if (!error) {
if (response.statusCode == 200) {
resolve(body);
} else {
reject(`http status code is ${response.statusCode}`);
}
} else {
reject(error);
}
});
})
}
let a = GetHttpResponse('http://www.baidu.com');
let b = GetHttpResponse('http://www.sohu.com');
let c = GetHttpResponse('http://www.qq.com');
Promise.all([a,b,c]).then((results) => {
results.forEach((result) => {
console.log(result);
})
})22.2.5创建具有状态的 Promise 对象
一般情况下，一个 Promise 对象创建后处于 pending 状态，直到运行才产生结果。但也可以直接创建 resolved 或 rejected 状态的 Promise 对象。即使用 Promise 对象的静态方法 resolve() 或 reject() ，语法格式：
Promise.resolve(数据);
Promise.reject(原因);具有状态的 Promise 对象创建后，就可以直接使用 then() 或 catch() 方法。如：
let a = Promise.resolve('hello');
a.then((data) => {
console.log(data);
})
let b = Promise.reject(new Error("出错了!"));
b.catch((error: Error) => {
console.log(error.name);
console.log(error.message);
})输出：
hello
Error
出错了!22.3异步函数
ECMAScript 8 中新增了两个关键字 async 和 await，用于解决异步任务的代码组织问题。
22.3.1创建异步函数
async 关键字用于创建异步函数，可以用在常规函数声明、函数表达式、箭头函数和方法上。如：
async function hello(name: string) {
return `Hello ${name}`;
}
console.log(hello('Rose'));输出：
Promise { 'Hello Rose' }可见，输出的不是我们的预期，因为异步函数是基于 Promise 对象的语法糖，可以像调用 Promise 对象一样使用 then() 方法。如：
async function hello(name: string) {
return `Hello ${name}`;
}
hello('Rose').then((data) => {
console.log(data);
})输出：
Hello Rose22.3.2使用异步函数
await 关键字必须在由 async 标记的异步函数中使用，或者在模块的顶层代码中使用。
当执行到 await 关键字所在的语句时，代码会暂停在此处，直到它后面的 Promise 对象返回结果，然后再继续执行后面的代码。（这里的暂停只是指暂停异步函数中后续的代码，异步函数之外的同步代码依然在执行）。如：
async function hello(name: string) {
return `Hello ${name}`;
}
async function printHello() {
let word = await hello('Rose');
console.log(word);
}
printHello();
console.log('Main thread executed.');输出：
Main thread executed.
Hello Rose在常规函数中使用 await 关键字或在非模块的顶层代码中使用，均会引起编译错误。
22.3.3使用异步函数优化 Promise 对象
以下代码是前面封装的 request ：
import * as request from "request"
function GetHttpResponse(url): Promise<(resolve: ()=>void, reject: ()=>void)=>void> {
return new Promise((resolve, reject) => {
request(url, function(error, response, body){
if (!error) {
if (response.statusCode == 200) {
resolve(body);
} else {
reject(`http status code is ${response.statusCode}`);
}
} else {
reject(error);
}
});
})
}用异步函数调用 GetHttpResponse() 函数，如：
import * as request from "request"
function GetHttpResponse(url): Promise<(resolve: ()=>void, reject: ()=>void)=>void> {
return new Promise((resolve, reject) => {
request(url, function(error, response, body){
if (!error) {
if (response.statusCode == 200) {
resolve(body);
} else {
reject(`http status code is ${response.statusCode}`);
}
} else {
reject(error);
}
});
})
}
async function GetAllResponse() {
try {
let bodys: any = {};
bodys.baidu = await GetHttpResponse('http://www.baidu.com');
console.log(bodys.baidu);
bodys.bing = await GetHttpResponse('http://www.bing.com');
console.log(bodys.bing);
bodys.qq = await GetHttpResponse('http://www.qq.com');
console.log(bodys.qq);
} catch(error: any) {
console.log(error);
} finally {
console.log('Finished.');
}
}
GetAllResponse();以上代码整体上非常清晰明了，代码可读性极大地提高。
- 上一篇：selenium超全教程(1)——持续更新中
- 下一篇：高并发HTTP请求实践
相关推荐
- 联想windows7笔记本怎么连接网络
-
检查笔记本的无线网卡驱动1.右键我的电脑，点击“属性”，选择左侧“设备管理器”2.点击“网络适配器”，如果方框内没有驱动，请下载驱动精灵万能网卡版安装网卡驱动 二、若发现驱动前面是感叹号的&...
- 淘宝电脑版网页入口（淘宝网电脑版网页官方）
-
网站地址：https://www.taobao.com/网站链接：进入网站服务器IP：116.253.191.241网站描述：淘宝网首页,淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容...
- 大学生用哪个牌子的笔记本电脑好
-
荣耀MagicBook14英寸轻薄窄边框笔记本电脑（AMD锐龙58G512GFHDIPS正版Office）冰河银这款的性价比较高。也可以根据自己的预算选同系列其他型号。...
- 免费手机模拟器（免费手机模拟器下载）
-
目前能成功在电脑上模拟苹果系统的iOS模拟器，对比市面上常见的安卓模拟器少太多了，主要原因还是iOS系统比较封闭，难于开发。虽然前面说开发很困难，但是国内还是有一些厉害的IT小组成功推出了iOS模拟器...
- 新手怎么制作word表格（工作表格制作）
-
步骤如下：1、本次演示使用的软件为word文字处理软件，软件版本为Microsoftoffice家庭和学生版2016。2、首先打开Excel电子表格，根据问题描述，我们在word中插入两页表格。3、...
-
- 电脑开机启动进不了系统怎么办
-
一、修复错误如果频繁无法正常进入系统，则开机后马上按F8，看能否进入安全模式或最后一次配置正确模式，如能则进入后会自动修复注册表，并回忆前几次出现不正常现象时进行了什么操作，并根据怀疑是某个应用软件导致问题产生，将其卸载，然后正常退出，...
-
2026-01-02 13:05 liuian
- win11任务栏隐藏不了（win11任务栏怎么隐藏）
-
方法/步骤： 1、打开电脑桌面，双击我的计算机。 2、打开控制面板。 3、点击类别切换到大图标或小图标。 4、找到通知区域图标打开。 5、选择显示图标或隐藏图标也可以仅显示通知，选好以后点击...
- 笔记本注册表编辑器怎么打开
-
你好，要打开注册表编辑器，可以按照以下步骤进行操作：1.打开“运行”对话框。可以通过按下Win+R键组合，或者在开始菜单中搜索“运行”来打开。2.在“运行”对话框中，输入“regedit”并点...
- 怎样查询ip地址（怎么顺着ip地址找人）
-
答:查看ip地址的步骤如下，1.通过网页进行查询：可以通过第三方平台进行查询。2.通过电脑内部的网络连接进行查询：首先我们点击桌面右下角的开始，在开始的选项栏当中找到运行，点击运行，然后再用新的对...
- windows server 2003的应用（win2003应用程序服务器）
-
WindowsServer2003支持FAT16、FAT32和NTFS文件系统，同时也支持CDFS（光盘文件系统）和UDF（通用磁盘格式）。NTFS文件系统的安全性高于FAT文件系统，支持域的管理...
- c盘格式化恢复软件（格式化c盘 软件）
-
点我名字，然后点“他的空间”，我的空间有各种恢复软件的详细介绍、下载地址以及使用说明。C盘格式化后需重装操作系统，系统装好后，要恢复其他盘的软件的话可以在格式化C盘前将桌面数据备份在其他盘，重装完成后...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)