22.TypeScript异步编程

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

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