22.TypeScript异步编程

liuian 2024-12-04 13:46 15 浏览

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 request

request() 函数需要传入的两个参数：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 executed

2.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 executed

22.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 Rose

22.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();

以上代码整体上非常清晰明了，代码可读性极大地提高。

meta content

上一篇：selenium超全教程(1)——持续更新中
下一篇：高并发HTTP请求实践

22.TypeScript异步编程

22.TypeScript异步编程

22.1回调函数

22.1.1一般的异步任务

22.1.2计时器

22.2 Promise 对象

22.2.1声明 Promise 对象

22.2.2 Promise 错误处理

22.2.3 finally() 方法

22.2.4组合 Promise 对象

22.2.5创建具有状态的 Promise 对象

22.3异步函数

22.3.1创建异步函数

22.3.2使用异步函数

22.3.3使用异步函数优化 Promise 对象

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

【验证码逆向专栏】vaptcha 手势验证码逆向分析

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

python使用fitz模块提取pdf中的图片

《人人译客》如何规划你的移动电商网站(2)

Jupyterhub安装教程 jupyter怎么安装包

22.TypeScript异步编程

22.TypeScript异步编程

22.1回调函数

22.1.1一般的异步任务

22.1.2计时器

22.2 Promise 对象

22.2.1声明 Promise 对象

22.2.2 Promise 错误处理

22.2.3 finally() 方法

22.2.4组合 Promise 对象

22.2.5创建具有状态的 Promise 对象

22.3异步函数

22.3.1创建异步函数

22.3.2使用异步函数

22.3.3使用异步函数优化 Promise 对象

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

【验证码逆向专栏】vaptcha 手势验证码逆向分析

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

python使用fitz模块提取pdf中的图片

《人人译客》如何规划你的移动电商网站(2)

Jupyterhub安装教程 jupyter怎么安装包

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄