この記事は、一緒に金の創造の道を始めるための「新人創造セレモニー」イベントに参加しました。
この記事では、async〜await間のロマンスを理解するためにあなたを連れて行きます。
非同期処理に関しては、ES5のコールバックにより、コールバック地獄のサイクルに陥りました。その後、ES6のPromise（Promiseは理解できませんか？ここをクリックして理解してください）により、サイクルから抜け出すことができます。最後に、ES7のasync-awaitが私たちに光をもたらします。 。今日は、非同期について学びます-夏を待ち、それがPromiseとどのように関連しているかを確認します。
1.Asyncの原則に歩み寄る-待つ
1.原則1
async函数返回一个 Promise 对象，可以使用then方法添加回调函数。例えば：
// async返回的是Promise对象？
async function testAsync() {
return 'hello';//上篇文章Promise对象的返回值如果不是Promise，会通过Promise.resolve()转化为Promise，再进行处理
}
const result = testAsync()
console.log(result);//Promise { 'hello' } 说明async返回的是Promise对象
したがって、asyncはPromiseオブジェクトを返すので、asyncの背後にある関数を.then（）または.catch（）に接続できます...？試してみるとわかります。
// async返回的是Promise对象,并且可以接Promise的方法？
async function testAsync() {
// await await等待还是promise对象
return 'hello'
}
testAsync()
.then((result)=>{
console.log(result);
})
.catch((error)=>{
console.log(error);
})
//hello 妈耶！打印了！说明async返回的是Promise对象，并且可以接Promise的方法，并且！！！默认状态是resolved的
上記のコードは、async函数内部return语句返回的值，会成为then方法回调函数的参数
2.原則2
当async函数内部抛出错误的时候，会导致返回的 Promise 对象变为reject状态。スローされたエラーオブジェクトは、.then（）メソッドの2番目のコールバック関数または.catch（）メソッドのコールバック関数によって受信されます。
// async函数内部抛出错误或者Promise状态为reject
async function testError(){
//throw new Error('出错啦~~');
await Promise.reject('出错了');//await前面有return和没有return效果一样
}
testError()
// .then(()=>{},(error)=>{console.log(error);})
.catch(error=>{console.log(error);})
//Error: 出错啦~~
3.原則3
await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。コードの説明：
// await
async function getName(){
// return '来自星星的你';
return await '来自星星的你';//上面直接return等价于这个return
}
getName()
.then(result=>{console.log(result);})
//来自星星的你
4.原則4
await的使用，必须要有async。これはasync-awaitのロマンスです。asyncはPromiseオブジェクトを返し、awaitはこのPromiseオブジェクトを待機するため、awaitをasyncなしにすることはできません（ただし、asyncをawaitなしにすることはできます）。あなたはロマンチックになりましたか？とにかく酔っている。awaitに非同期がない場合はどうなりますか？エラー：
// await没有async会报错
function testAwait(){
return await '西红柿炒辣椒'
}
testAwait()
.catch(error=>{
console.log(error);
})
//SyntaxError: await is only valid in async function
2.詳細な非同期待機ルール
1.asyncはPromiseをカプセル化します
// async封装Promise
async function fn1() {
return '喜羊羊与灰太狼';// //相当于return Promise.resolve('喜羊羊与灰太狼')
const data = await fn1();//接收data值
}
fn1()//执行async函数，返回的是一个Promise对象
.then(data => {
console.log('content =', data)
})
//content = 喜羊羊与灰太狼
2.awaitはthenと同等です
// await---.then()
async function getName(){
const operate=Promise.resolve('白雪公主')//执行函数
const name= await operate //await相当于Promise的then operate.then(name=>{})
console.log('name:',name)
}
getName();
( async function(){
const person=await '七个小矮人' //await Promise.resolve('七个小矮人') await后面不跟Promise，也会被封装成Promise
console.log('person:',person)//400
})();//自执行函数
//name: 白雪公主
//person: 七个小矮人
3.複数の待機がある場合は、順番に実行します
関数が実行されると、waitが発生すると、最初に戻り、非同期操作が完了するまで待機してから、関数本体で次のステートメントを実行します。任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。
async function testOrder() {
await Promise.reject('出错了')//UnhandledPromiseRejectionWarning: 出错了
await Promise.resolve('hello world'); // 不会执行
}
testOrder();
4. try...catchはcatchと同等です
前の非同期操作が失敗した場合でも、後続の非同期操作を中断したくない場合。はい将第一个await放在try...catch结构里面。非同期操作が成功したかどうかに関係なく、2番目の待機が実行されます。
// try...catch
!(async function () {
const testError = Promise.reject('出错啦~~~')//rejected状态
// const testError=throw new Error('出错啦~~~');
try {
const result = await testError; //await相当于then，但是reject不会触发then
console.log('success:'+result) //不会输出，因为const result = await testError被报错，被catch捕获
} catch (error) {
console.error('error:'+error)//try...catch 相当于Promise的catch
}
})()
//error:出错啦~~~
awaitの後にPromiseオブジェクトが続くと、次の也可直接在await后面直接.catch捕获エラーが発生します。
async function testError() {
await Promise.reject('出错了')
.catch(error => console.log(error));//这里捕获错误，不会影响下一个await执行
return await Promise.resolve('hello world');
}
testError()
.then(result => console.log(result))
3.Async-await構文を解析します
面接の質問を簡単に見てみましょう。
// 面试题
function getJSON() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(2);
resolve(2)
}, 2000)
})
}
async function testAsync() {
await getJSON()
console.log(3);
}
testAsync()
//2
//3
问题当然不会问打印顺序啦，问题是将async await语句解析翻译为Promise？
根据现在的知识面，我们必须知道：
（1）await不能单独出现，其函数前面一定要有async。
（2）await会干两件事：
第一，将写在await后面的代码放到async创建的那个Promise里面执行。
第二、将写在await下面的代码放到前一个创建的那个Promise对象的.then里面执行。
（3）await返回的也是Promise对象，他只是把await下面的代码放到了await返回的promise的.then里面执行。
这样的话，是不是如鱼得水了。翻译如下：
function getJSON() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(2);
resolve(2)
}, 2000)
})
}
// 编译成Promise原理
function testAsync() {
return Promise.resolve().then(() => {
return getJSON();
})
.then(() => {
console.log(3);
})
}
testAsync()
四、拓展Async-await应用
1、场景1
你学废async-await了嘛？还记得上一篇开篇的回调地狱嘛？我们通过Promise解决回调是这样的：
// Promise解决方式
function doCallback(n) {
var myPromise = new Promise(function (resolve, reject) {
//处理异步任务
var flag = true;
setTimeout(function () {
if (flag) {
resolve(n)
}
else {
reject('失败')
}
},0)
})
return myPromise;
}
doCallback(1)
.then((result) => { //then是成功执行的方法 返回的还是一个Promise对象
console.log(result);//打印张三 res是执行
return fn(2);
})
.then((result) => {
console.log(result);
return fn(3)
})
.then((result) => {
console.log(result);
return fn(4)
})
.then((result) => {
console.log(result);
})
.catch((result) => { //catch是失败执行的方法
console.log(result);
})
//好多.then,形成.then链啦
//1
//2
//3
//4
通过以上Promise方法，可以明显解决回调地狱“向右移”的浮夸表现，但是，Promise是基于 then, catch 的链式调用，但也是基于回调函数。.then链多多少少还是违背原生代码，显得也不是很优雅。作为回调终极武器，async-await更加贴近于原生代码，我们看一下吧：
//封装一个返回promise的异步任务
function doCallback(str) {
var myPromise = new Promise(function (resolve, reject) {
var flag = true;
setTimeout(function () {
if (flag) {
resolve(str)
} else {
reject('处理失败')
}
})
})
return myPromise;
}
//封装一个执行上述异步任务的async函数
async function testAsync() {
var result1 = await doCallback(1); //await直接拿到fn()返回的promise的数据，并且赋值给result
var result2 = await doCallback(2); //await 后面的代码，都可以看做是异步回调 callback 里的内容，都是异步的
var result3 = await doCallback(3);
var result4 = await doCallback(4);
console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
}//这样是不是简洁优雅多了呢？
//执行函数
testAsync();
//1
//2
//3
//4
有了 async-await、promise 还有必要学习吗？通过上面async-await的解决方案可以瞧见，async / await 和 Promise 并不互斥，二者相辅相成。同时async / await 并不能改变异步的本质（ js是单线程的，异步需要回调，都是要基于 event loop 来实现(什么是event loop?关注我，等我文章~)）。
总结
现在知道了，async-await是promise的语法糖了吧，不仅让我们书写代码时更加流畅，而且增强了代码的可读性。特别注意的是：虽然async-await 是建立在 Promise机制之上的，但是并不能取代其地位，他们两者相辅相成，息息相关。其实async-await不止是Promise的语法糖，还是Generator的语法糖，Generator是什么？我们下篇见分晓。