ES6基础之async/await及Promise来处理异步方法数据

1. Promise来获取异步方法中的数据：

类似于将一个异步方法封装在一个具有回调函数的函数里，Promise实际上充当了这种封装作用。然后通过resolve和reject函数向外输出成功时的数据和失败时的错误信息，以Promise.then((data)=>{})来接收输出的数据，如下图过程：

promise结构图

例如下面的代码：

const p = new Promise((resolve, reject)=>{
    setTimeout(function(){
        const name = 'joyitsai';
        resolve(name);
    /*
    如果失败reject输出错误信息
     reject(`error_info`)
    */
    }, 1000);
})
p.then((data)=>{
    console.log(data);
})

2. async/await与Promise：

所谓的Promise，把它想象成一个容器，里面放着一些正在处理的问题，但不管过多长时间，它最终都会把它处理完成的结果(不管是成功还是失败的)输出给你，而且，它允许你通过.then((data)=>{})方法来接收这个结果数据。Promise可以说是为处理异步而生。

(1) 关于async

而所谓的async，它是将一个方法或函数变成异步的，它会将一个普通函数封装成一个Promise，为什么要封装成Promise呢？其实它只是Promise的搬运工，利用了Promise处理异步问题的能力，能让你更好地解决需要异步处理的代码。。下面看一下简单的代码：

/**async/await 与Promise */
async function testAsync(){
    return 'Here is Async';
}
const result = testAsync();
console.log(result);

执行后，你将会看到：

Promise { 'Here is Async' }

既然async实际上是将一个普通函数封装成了Promise，那么来获取async封装的这个异步方法的数据自然可以用Promise的.then()方法，接着上面的代码，你可用result.then((data)=>{})来接收和处理得到的数据。
但是async的作用如果仅仅是这样，那还要它干嘛？async其实是与await结合使用的，目的在于：直接返回异步方法中的数据：

async function run(){
    const data = await testAsync();
    console.log(data)
}
run();

得到的data就是Here is Async。

(2) 关于await

• async用来申明里面包裹的内容可以进行同步的方式执行，await则是进行执行顺序控制，每次执行一个await，程序都会暂停等待await返回值，然后再执行之后的await。
• await后面调用的函数需要返回一个promise，另外这个函数是一个普通的函数即可，而不是generator。
• await只能用在async函数之中，用在普通函数中会报错。
• await命令后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try...catch 代码块中。

关于await的理解：

await具有阻塞功能，可以理解为：等待await语句执行完成后，后面的程序才会继续。这就意味着，虽然一段包含await语句的异步程序，最终却是按照同步的顺序来执行。
此外，await的阻塞，意味着它不能用在async以外的函数中，因为await会严重影响非async（异步）程序的执行效率，只能用在async函数中。

下面是await将异步变成同步的代码段：

async function test(){
    console.log(2);
    return 'Joyitsai';
}

async function run(){
    console.log(1);
    const data = await test();
    console.log(data);
    console.log(3);
}
run();

打印结果为：

1
2
Joyitsai
3