22.ES8 async

Posted on 2023-01-16 Edited on 2023-03-12 In ECMAScript

1.async 函数

async 函数的返回值类型:

Promise 类型（大多数情况）
Error 类型
其他非 Promise 类型

无论 async 函数 return 什么类型的值，async 函数的返回值均为 Promise 对象

(1) Promise 类型

若返回的 Promise 对象处理成功，则函数的返回值为成功的(fulfilled) Promise 对象

// async 函数
async function fn() {
    return new Promise((resolve, reject) => {
        resolve("process success");
    });
}

const result = fn();
console.log(result);
// Promise {<pending>}
//      [[Prototype]]: Promise
//      [[PromiseState]]: "fulfilled"
//      [[PromiseResult]]: "success"

// 调用 then() 方法
result.then(value => {
    console.log(value);
    // process success
}, reason => {
    console.warn(reason);
});

若返回的 Promise 对象处理失败，则函数的返回值为失败的(rejected) Promise 对象

// async 函数
async function fn() {
    return new Promise((resolve, reject) => {
        reject("process failed");
    });
}

const result = fn();
console.log(result);
// Promise {<pending>}
//      [[Prototype]]: Promise
//      [[PromiseState]]: "rejected"
//      [[PromiseResult]]: "process failed"

// 调用 then() 方法
result.then(value => {
    console.log(value);
}, reason => {
    console.warn(reason);
    // process failed
});

(2) Error 类型

若 async 函数发生 Error，则返回失败的(rejected) Promise 对象

// async 函数
async function fn() {
    throw new Error("Server Error");
}

const result = fn();
console.log(result);
// Promise {<rejected>: Error: Server Error
//      [[Prototype]]: Promise
//      [[PromiseState]]: "rejected"
//      [[PromiseResult]]: Error: Server Error

// 调用 then() 方法
result.then(value => {
    console.log(value);
}, reason => {
    console.warn(reason);
    // Error: Server Error
});

(3) 其他非 Promise 类型

若 async 函数返回其他非 Promise 类型，则 async 函数的返回值总是一个成功的(fulfilled) Promise 对象

return string

// async 函数
async function fn() {
    return "abc";
}

const result = fn();
console.log(result);
// Promise {<fulfilled>: 'abc'}

// 调用 then() 方法
result.then(value => {
    console.log(value);
    // abc
}, reason => {
    console.warn(reason);
});

return boolean

// async 函数
async function fn() {
    return false;
}

const result = fn();
console.log(result);
// Promise {<fulfilled>: false}

// 调用 then() 方法
result.then(value => {
    console.log(value);
    // false
}, reason => {
    console.warn(reason);
});

return;

// async 函数
async function fn() {
    return;
}

const result = fn();
console.log(result);
// Promise {<fulfilled>: undefined}

// 调用 then() 方法
result.then(value => {
    console.log(value);
    // undefined
}, reason => {
    console.warn(reason);
});

没有 return

// async 函数
async function fn() {

}

const result = fn();
console.log(result);
// Promise {<fulfilled>: undefined}

// 调用 then() 方法
result.then(value => {
    console.log(value);
    // undefined
}, reason => {
    console.warn(reason);
});

2.await 表达式

await 必须写在 async 函数中
await 右侧的表达式一般为 promise 对象
await 返回的是 promise 成功的值
await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

// 创建 promise 对象
const p = new Promise((resolve, reject) => {
    // 1.成功情况
    resolve("info data");
    // 2.失败情况
    // reject("process failed");
})

// await 要放在 async 函数中
async function main() {
    try {
        // 若 Promise 对象的状态为成功，则返回 Promise 对象的值
        let result = await p;
        console.log(result);
        // info data
    } catch (error) {
        // 若 Promise 对象的状态为失败，
        // 则需要用 try-catch 处理
        // 返回 Promise 对象的值
        console.log(error);
        // process failed
    }
}

//调用函数
main();

3.async 和 await 读取文件内容

// 1.引入 fs 模块
const fs = require("fs");

// 2.定义读取文件的函数
function readFile1() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/file1.txt", (err, data) => {
            if (err) {
                
            } else {
                resolve(data);
            }
        })
    })
}

function readFile2() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/file2.txt", (err, data) => {
            if (err) {
                
            } else {
                resolve(data);
            }
        })
    })
}

function readFile3() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/file3.txt", (err, data) => {
            if (err) {
                
            } else {
                resolve(data);
            }
        })
    })
}

// 3.定义一个 async 函数
async function main() {
    let result1 = await readFile1();
    let result2 = await readFile2();
    let result3 = await readFile3();

    console.log(result1.toString());
    console.log(result2.toString());
    console.log(result3.toString());
}

// 4. 执行 async 函数
main();

4.async 和 await 封装 AJAX 请求

// 发送 AJAX 请求，返回的结果是 Promise 对象
function sendAjax(url) {
    return new Promise((resolve, reject) => {
        // 1.创建对象
        const xhr = new XMLHttpRequest();

        // 2.初始化
        xhr.open("GET", url);

        // 3.发送
        xhr.send();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.response);
                } else {
                    reject(xhr.status);
                }
            }
        }
    });
}

// 1.Promise then() 方法测试
sendAjax("https://api.apiopen.top/api/sentences").then(value => {
    console.log(value);
    // {"code":200,"message":"成功!","result":{"name":"","from":""}}
}, reason => {

})

// 2.async 和 await 测试，axios 框架返回的也是 Promise 对象
async function main() {
    // 发送 AJAX 请求
    let result = await sendAjax("https://api.apiopen.top/api/sentences");
    let weather = await sendAjax("https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P");

    console.log(result);
    // {"code":200,"message":"成功!","result":{"name":"","from":""}}
    console.log(weather);
    // {"cityid":"101010100", ...}
}

main();