【ES6】async await异步操作解决方案

---

一、async/await

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是 Generator 函数的语法糖。
async 函数就是将 Generator 函数的星号（ * ）替换成 async ，将 yield 替换成 await ，仅此而已。
async 函数对 Generator 函数的改进，体现在以下四点：

• 内置执行器。
  Generator 函数的执行必须靠执行器，所以才有了 co 模块，而 async 函数自带执行器。也就是说， async 函数的执行，与普通函数一模一样，只要一 行。
• 更好的语义。
  async 和 await ，比起星号和 yield ，语义更清楚了。 async 表示函数里有异步操作， await 表示紧跟在后面的表达式需要等待结果。
• 更广的适用性。
  co 模块约定， yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以是 Promise 对象和原始类型的值（数值、字 符串和布尔值，但这时等同于同步操作）。
• 返回值是 Promise。
  async 函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用 then 方法指定下一步的操作。 进一步说， async 函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而 await 命令就是内部 then 命令的语法糖。

二、用法详解

1. 基本用法

// 普通函数
function foo() {
    return 'kakaDorothy'
}
console.log(foo())

// async
async function foo(){
    return 'kakaDorothy' // 与Promise.resolve('kakaDorothy')的作用一样
}
console.log(foo()) // 返回promise对象

async function foo() {
    let result = await 'kakaDorothy' // 通常跟上异步操作
    console.log(result)
}
foo()

2. 异步操作

function timeout() {
    return new Promise(resolve => {
        setTimeout(()=>{
            // console.log(1)
            resolve(1)
        }, 1000)
    })
}

async function foo(){
    const res = await timeout()
    console.log(res)
    console.log(2)
}
foo()
// 1 2

如果是失败的情况：

function timeout() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve('success')
            reject('fail')
        }, 1000)
    })
}
async function foo() {
    return await timeout()
}
foo().then(res => {
    console.log(res);
}).catch(err => {
    console.log(err)
})
// fail

3. 用于ajax请求

axios是发送ajax的一种方式

// 伪代码
async function request(){
    const data = await axios.get('http://www.xx.com')
    console.log(data)
}

function ajax(url, callback) {
    // 1、创建XMLHttpRequest对象
    var xmlhttp
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // 兼容早期浏览器
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2、发送请求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    // 3、服务端响应
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
         	callback(obj)
        }
    }
}

function request(url) {
    return new Promise(resolve => {
        ajax(url, res => {
            resolve(res)
        })
    })
}
async function getData(){
    const res1 = await request('static/a.json')
    console.log(res1)
    const res2 = await request('static/b.json')
    console.log(res2)
    const res3 = await request('static/c.json')
    console.log(res3)
}
getData()
// {a: "我是A"}
// {b: "我是B"}
// {c: "我是C"}

总结

async需要卸载function关键字前面，async/await 需要成对出现，且await需要写在函数内部。
async/await 与Promise一样也是一种异步操作解决方案，但它不需要写then不需要写回调函数，让代码更加简洁，减少了代码嵌套，把异步的代码以同步的写法呈现，这样代码的可读性更强，同时也增加了可维护性。