学习笔记 JavaScript ES8 ECMAscript 2017 异步编程Async Await

学习内容：

• Async / Await  （异步 / 等待）

相比async/await来讲，promise在异步操作多，彼此依赖时，async/await的处理更加优雅一些。就是说，写异步操作的代码时，就像写同步操作一样顺畅，可读性很强，复杂代码可维护性强。

其实async函数是Grenerator函数的语法糖。

grenrator函数是方法上有*，里面有yield关键字，

async函数是方法名称上有async，里面有await关键字，而且await只能写在async函数的里面。

对比一个async和普通函数：

普通函数：

function foo() {
    return 'hello~'
}
console.log(foo());

---------
hello

async函数：async关键字是写在function前面的

async function foo() {
    return 'hello~' // 下面的输入相当于，return这句等价于Promise.resolve('hello~')
}
console.log(foo());

----------------------------------
Promise {<fulfilled>: 'hello~'}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "hello~"

下面的代码只是一个简单例子，正常await后面需要写异步操作，下面这里写个字符串没什么意义。

async function foo() {
    let result = await 'hello'
    console.log(result);
}
foo()

----------
hello

async / await的基本用法，看下面的例子，注意注释吧。。。。

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

async function foo() {
    await timeout() // await的意思是，等待异步操作的代码timeout()执行结束之后再执行后面的代码
    console.log(2);
}

foo()

在上面的例子中，向resolve传递参数resolve(1)：

function timeout() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(1)
        }, 1000);
    })
} 

async function foo() {
    const res = await timeout()
    console.log(res); // await 异步操作执行结束后，下面两行代码才开始执行，所以先输出1，再输出2
    console.log(2);
}

foo()

------
1
2

再来看，异步操作失败的情况下，如何用async/await结合Promise来处理：

function timeout() {
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            // resolve(1)
            reject('fail')
        }, 1000);
    })
} 

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

foo().then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

------
fail

之前写的三个异步操作的例子，看看用async/await来实现，看看是不是特别的优雅：

先定义一个ajax请求的模块：

function ajax(url, callback) {
  var xmlhttp;
  // 1、创建XMLHttpRequest对象
  // window.XMLHttpRequest这个对象存在，说明当前浏览器是IE7+或chrome
  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);
      callback(obj)
    }
  };
}

// var url = "http://jsonplaceholder.typicode.com/users";
export default ajax

再来写三个异步操作实现：

import ajax from './ajax'
function request(url) {
    return new Promise(resolve => {
        ajax(url,res => {
            resolve(res)
        })
    })
}

async function getData() {
    const res1 = await request("http://jsonplaceholder.typicode.com/users")
    console.log(res1)
    const res2 = await request("http://jsonplaceholder.typicode.com/users")
    console.log(res2)
    const res3 = await request("http://jsonplaceholder.typicode.com/users")
    console.log(res3)
}

getData()