【ECMAScript6】async和await

async函数

async函数返回一个Promise对象，该对象的状态取决于函数返回值，如果函数返回
非Promise对象或者返回成功状态的Promise，则这个函数返回的Promise对象状态
为成功，如果函数返回失败的Promise对象或者抛出错误，则这个函数返回的Promise
对象状态为失败

        async function fn() {
            return new Promise((resolve, reject) => {
                resolve('请求成功数据')
            })
        }

        const result = fn()
        
        result.then(value => {
            console.log(value)   // 请求成功数据
        }, error => {
            console.warn(error)
        })

await表达式

        const p = new Promise((resolve, reject) => {
            resolve('成功数据')
        })

        // await 要放到async函数中，其后是一个Promise对象
        async function fn() {
            // await返回的结果就是其后Promise对象成功的值（注意一个Promise对象有两个属性，一个是状态，另一个是值）
            // 如果其后Promise对象的状态为失败，则会抛出错误
            let result = await p
            console.log(result)  // 成功数据
        }
        fn()

        const p1 = new Promise((resolve, reject) => {
            reject('失败信息')
        })

        // await 要放到async函数中，其后是一个Promise对象
        async function fn1() {
            try {
                // 如果其后Promise对象的状态为失败，则会抛出错误，需要用try...catch进行捕获
                let result = await p1
            } catch(e) {
                console.log(e)  // 失败信息
            }
        }
        fn1()

async与await结合读取文件内容

        const fs = require('fs')
        
        function readFile1() {
            return new Promise((resolve, reject) => {
                fs.readFile('./file1.md', (err, data) => {
                    if(err) reject(err)
                    resolve(data)
                })
            })
        }
        
        function readFile2() {
            return new Promise((resolve, reject) => {
                fs.readFile('./file2.md', (err, data) => {
                    if(err) reject(err)
                    resolve(data)
                })
            })
        }
        
        function readFile3() {
            return new Promise((resolve, reject) => {
                fs.readFile('./file3.md', (err, data) => {
                    if(err) reject(err)
                    resolve(data)
                })
            })
        }
        
        async function readFiles() {
            let fileData1 = await readFile1()
            let fileData2 = await readFile2()
            let fileData3 = await readFile3()
            console.log(fileData1.toString() + '\r\n' + fileData2.toString() + '\r\n' + fileData3.toString())
        }
        readFiles()

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()
                
                // 4. 绑定事件，处理响应结果
                xhr.onreadystatechange = function() {
                    if(xhr.readyState === 4) {
                        if(xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response)
                        }else {
                            reject(xhr.status)
                        }
                    }
                }
            })
        }

        // 假设测试接口为：https://api.apiopen.top/getJoke
        // 1. 通过Promise then方法进行测试
        sendAjax('https://api.apiopen.top/getJoke').then(value => {
            console.log(value)
        }, error => {
            console.log(error)
        })

        // 2. 通过async await方法进行测试
        async function main() {
            let result = await sendAjax('https://api.apiopen.top/getJoke')
            console.log(result)  // result为sendAjax返回Promise成功的值,也就是所需要的数据信息
        } 
        main()

        // 注: vue中的axios返回值也是一个Promise对象,可以很好的和async await结合使用