【Promise】第五部分 async和await

文章目录

【Promise】第五部分 async和await
5. async和await
总结

5. async和await

5.1 mdn文档

async

await

5.2 async函数

async 函数的返回值为 promise 对象
promise 对象的结果由 async 函数执行的返回值决定

 // 和then的规则很像
        async function main (){
            // 1. 如果返回的值是非Promise对象则状态为成功,值为返回的值
            // return 123

            //2. 如果返回的值是Promise对象,则由该Promise对象决定返回结果和状态
            return new Promise((resolve,reject)=>{
                resolve('ok')
            })
        }

        let res = main()
        console.log(res)

5.3 await表达式

await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
如果表达式是 promise 对象, await 返回的是 promise 成功的值
如果表达式是其他值, 直接将此值作为 await 的返回值
需要注意:
- await必须要写在async函数中,但是async函数中可以没有await
- 如果await的Promise失败了,就会抛出异常,需要通过try…catch进行捕获

 // 和then的规则很像
        async function main (){
            let p = new Promise((resolve,reject)=>{
                resolve('ok')
            })

            let p1 = new Promise((resolve,reject)=>{
                reject('error')
            })

            // 1. 右侧为Promise对象,并且状态为成功
            let res = await p
            console.log(res)

            //2. 右侧为Promise对象,并且状态为失败
            // 状态为失败,await会抛出错误,需要try..catch进行捕获

            try {
                let res1 = await p1  
            } catch (e) {
                console.log(e)
            }

            //3. 右侧的值为其他值
            let res2 = await 'hhhh'
            console.log(res2) 
            
        }

        main()

5.4 async和await结合的例子

案例一: 读取多个文件

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

async function mian (){
    try{
        let data1 = await miniReadFile('./10-async和await.txt')
        let data2 = await miniReadFile('./11-读取文件.txt')
        let data3 = await miniReadFile('./12-发送ajax.txt')
        console.log(data1 + data2 + data3)
    }catch(e){
        console.log(e)
    }
}

案例二: 发送Ajax请求

<button class="btn">点击我发送请求</button>
    <script>

        function sendAjax(url) {
            return new Promise((resolve, reject) => {
                // 创建一个对象
                let xhr = new XMLHttpRequest()

                //设置接收类型
                xhr.responseType = 'json'

                // 初始化
                xhr.open('Get', url)

                //发送
                xhr.send()

                //对响应结果进行处理
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response.result[0].title)
                        }else{
                            reject(xhr.status)
                        }
                    }
                }
            })
        }

        const btn = document.querySelector('.btn')
        btn.addEventListener('click',async function(){
            let res = await sendAjax('https://api.apiopen.top/getWangYiNews')
            console.log(res)
        })
        

    </script>