前端Promise-Day42

async函数：函数的返回值为promise对象，promise对象的状态由async函数执行的返回值决定。（与then方法的返回结果规则一致）

    　　async function main() {
            // 如果返回值为非Promise类型的数据，则返回为成功的对象
            return 521
            // 如果返回Promise的对象,则结果根据Promise的状态返回
            return new Promise((resolve, reject) => {
                reject('err')
            })
            // 如果抛出异常,则结果的promise状态为失败且值为异常值
            throw 'no'
        }

 

await函数：await右侧的表达式一般为promise对象。如果表达式为promise对象，则函数返回值为promise成功的值。如果表达式为其它值，则直接将此值作为函数的返回值。

注意：① await必须写在async中。但async函数中可以没有await。② 如果await的promise失败了，则会抛出异常，需要通过try..catch捕获。

 async function main() {
            // 1.右侧为promise的情况
            let p = new Promise((resolve, reject) => {
                resolve('ok')
            })

            let res = await p;
            // 输出成功值

            // 2.右侧为其他类型的数据
            let res2 = await 20;
            console.log(res2)
            // 直接输出数据

            // 如果promise是失败的情况
            try {
                let res3 = await new Promise((resolve, reject) => {
                    reject('err')
                })
            } catch (error) {
                console.log(error);
            }

        }
        main()

 

通过async和await实现回调函数功能：

① 读取文件：

const fs = require('fs')
const util = require('util')
const mineReadFile = util.promisify(fs.readFile)

// async和 await结合实现
async function main() {
    try {
        let data1 = await mineReadFile('./1.txt')
        let data2 = await mineReadFile('./2.txt')
        let data3 = await mineReadFile('./3.txt')
        console.log(data1 + data2 + data3)
    } catch (e) {
        console.log(e)
    }
}

main()

 

② 实现AJAX请求：

function sendAJAX(url) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest()
                xhr.open('GET', url)
                xhr.send()
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response)
                        } else {
                            reject(xhr.status)
                        }
                    }
                }
            })
        }

        document.querySelector('#btn').addEventListener('click', async () => {
            // 获取信息
            let mes = await sendAJAX('http://127.0.01:7080/get')
            console.log(mes)
        })