异步解决方案看他就够了（promise、async）（1.1万字）-六虎

刚触摸js的时分，对于es6的promise、async、await几乎怕的要死，甚至有段时刻十分害怕promise这个词，跟着后边慢慢的触摸，觉得这个东西并非那么U R r u J c B D难了解，首要仍是需要弄懂js的一些基础常识。那么接下来，跟上我的思路，一同完全弄懂p& 7 J h . +romise、async、await。

关于这个系列一共三个比较重要的常识点：

1、关于什么同步、异步，其间触及了一些仓库和音讯行列、事情轮询的常识；
2、关于异步编程的几个处理方案，首要是回调函数和promise；
3、关于异步编程的终^ * l v [极处理方案Generator函数以及他的语法糖async、await。

假如要弄懂promise，就有必要弄懂什么k Y Y * * 4 ! v是异步、什么是同步，这篇文章首要是讲一下什么是同步、什么是异步。

js是怎样来的9 h d w？

任何新言语的出现必定是与他其时的需求有联系的，js全u X 1 h m称是Jav? [ o z H g w ^ascript，诞生于1995年（跟我同岁）。开端他的诞生便是为了表单提交的时分做提示用的，C L * p W D u在js面世之前，一切的表单都有必要提交到服务端才干校验必填项] o b G j v。

比方你想申请一个qq号，各种信息填了一大堆，提交完才知道，你手机号少输入了一位从头输入，那必定砸电脑的心都有了，这个时分，js出生了，因为是跟用户做实时交互的，所以最早叫li. W ` F y m 8 1vescript，其时为了蹭蹭Java的热度，上户口的时分就改成了Javascript，一不小心长大了能够跟Java平起Z , * J V _ _ P平坐了。

js为什么是单线程

js从诞生之初便是单线程，那为什么是单线程呢？为了让咱们这些菜鸡更简略入门？当然不是。

js首要的用途便是操作DOM，以及与用户的交互，这就决议了他只能是单线程，I G K d c ^
比方你这个线程创立了一个DOM，那个线程给删除了，这时分浏览器应该以哪个为准，
所以这个应该永久不会变，你前端发展的能造火箭了，js必定也是单线程的。

一、什么是同步和异步

1、什么是同步呢？

你能够了解为同一个时刻，你只精干一件事。今日Y a p 下班早，你想给女朋友打个电话，女朋友可能跟其他小伙伴一同吃饭呢，
因为手机静音，所以听不~ Z 1到，你就一向打，一向打，啥都没干，把时刻都浪费了，这就叫9 O P P s同步。因为js是单线程的嘛，所以js从小便是同步的。

来一段代码：
func= b x [ $ M : ? Ution second() {
console.log('secondi v % D + t T v')
}
fun# / Pction first(){
console.log('first')
second()
console.log('Last')
}
first()
这个很简略，履行打印成果：
first、seco_ 4 Q {nd、last

那么js履行这段代码，究竟发生了e g G 9 a什么呢？这里边又有一个‘调用栈’的概念

2、调用栈

是不是一听到什么仓/ S 2 ? d h库就害怕，别慌，没那么复杂，你能够了解为一个厕所，咱们去上厕所，可是！不是先进先出，而是后进先出。用调用栈的概念，解释一下上面代码的履行次序：

当履行此代码时，将创立一个全局履行上下文并将其推到调用仓库的顶部；// 这个不太重要，下面是要点
first(g V c g / = e {)函数先上，现在他q , s [ ) N在顶部；
然后打印‘first’，然后履行完了，这个# A l r C时分这个console.log会主动弹走，便是这个consoleC - ^ Z.log虽然是后进来的，可是他先走了；
现在first函数仍然在顶部，他下面还有second函数，所以不会弹走；
履行second()函数,这时分second函数在顶部；
打印= b U ` + ( O‘second’，然后履行完了，弹走这个console.log，^ Z I U ,  6这时分second在顶部；
这个时分second函数的事儿都干完了，他也弹走了，这时分first函数在顶部；
浏览器会问，first你还有事吗，first说我还有一个，履行打印‘last’

3、什么是异步O F R @ G d呢？

电话没打通，你就给女朋0 s x F P 6友发了个短信，洗澡去了，你回家了告诉我，（等我洗完了）再打给你，这便是异步。后来为了T D n d 3 Z k F提高效率，把浏览器的多个内核都用起来，HTML5提出Web WorO ; _ker规范，答应JavaScrd 7 8 m I 4ipt脚本创T g ` Y A P立多个线程，可是子线程完全受主线程操 r l 5 k S :控，且不得操作DOM。

所以这并没有影响js单Y e #线程的本质，js仍是每次只精干一件事,只不过把洗澡提早了而已Z m K 5 ; H 6。

来段代码：
const getLw ^ b ~ist = () => {
setTime% w f 2 H J : ] %ou= & ; Q B J | ft(() => {
console.low F v j W Yg('我履行了！');
}, 2000);
};
console.6 ` . 5 Qlog('Hello World');
getList();
coF ` k 2 n j a $nsole.log('哈哈哈');
履行次序是：
Hello World、哈哈哈、我履行了！（两秒今后履行最终一个）

这段代码履行，又发生了什么呢？这个当地又有一个g @ m m 4‘音讯行列’的概念，不慌！

4、音讯行列

方才咱们说了，同步的时分，浏览器会保护一个‘履行栈’，除了履行栈，在敞开多线程的时分，浏览器还会保护一个音E ~ E _讯列表，– r 0 T E & . n除了主线程，其余的都是副线程，这些副线程合起来就叫音讯列表。

咱们用音讯列表的概念J @ w ` v 6 $剖析一下上面的代码：

依照履行次序console.log('Hello World')先履行，浏览器一看，中央军（主线程）！你先过；
然后是getlist函数履行，] D 6 B + [ C D浏览器看到setTimeout,你是八n ; n  p ; E @L（副线程）！你先靠边等着；
然后是console.log('哈哈哈')履行，中央军（l r : i c k u 3主线程）！你也过；
然后浏览器问，还有中央军吗？没了，八L开端过！

增加难度：

setTimeout(function() {
console.log('我是定时器！');
})
new Promise(f~ k l G 9unction(resolve) {
con[ ( b n , + y z Xsole.logU Q M('我是proK n c N @ m f ~mise！');
resolve();
}).then(function() {
console.log('我是then！');
})
console.R P *log('我是主线程！');
履行次序：
我是promise！
我是主线程！
我是then！
我是定时器！

为什么promise.then比定时器先履行呢？这个里边又触及了一个‘事情轮询’的概念。7 K + g

5、T ] 8 S @ | q初识事情轮询

上面咱们说了，浏览器为了提升效率，为js敞开了一个不太相同的多线程，因为js不能一起履行嘛，那副线程（注意是副线程里边哈）里边谁履行，这个挑选的进程，就能够! e I O 7了解为事情轮询。咱们先用事情轮询的次序剖析一下上面的代码，再来上概念：

prN y @ Vomise函数必9 0 |定首要履行，, i r C他是主线程嘛，打印_ M 1 G z‘| / & X f ~ | $ G我是promise’；
然后持续走主$ ! B H 2 % - b .线程，打印‘我是主线程’；
然后主线程走完了，开端走音讯列表；
（宏! , ` }使命和微使命一会再讲）
这个时分会先履行promis) 8 P % H -e.then，因为他是微使命，里边的‘我是then！’
音讯列表里边在上面的是定时器，可是定时器是宏使命，优先级比较低，所以会往后排；

6、什么是宏8 Z r b使命？微使命？

**宏使命（Macrota* f s : F 8 ~s y eks）：**p r w C K _ Xjs同步履行的代码块，setTimeout、setInterval、XMLHttprequest、setImmediate、I/O、UI ru G c Q k 2 E ^ender` / : I 0 Fing等。
**微使命（Microtasl M R 9 . !ks）：**promise、process.3 $ c Y 0 ! y WnextTick（node环境）、Object.observe, MutationObserver等。
微使命比宏使命要牛逼一点
浏览器履行的次序c [ P O [ Q：
(1)履行主代码块，这个主代码块也是宏使命
(2)若遇到Promise，把then之后的内容放进微使命行列
(3)遇到setT& $ 8 . 5imeout，把他放到宏使命里边
(4)一次宏使命履行完成，查看微使命行列有无使命
(5)有的话履行一切微使命
(6)履行结束后，开端下一次宏使命。

7、那么这个2、3、4、5、6履行的进程便是事情轮询。

在这儿感谢掘金大神的文章，x – z P a z为了表示尊重，挂上地址！

juejin.im/post/5e1d0d…

上一篇呢，首要是聊了聊同步、异步，他们各自引申出来的‘履行栈’、‘音讯行列’，以及‘宏使命’、‘微使命’，假如咱们对这几个概念不太了解，能够去这个链接：

www.jianshuU w ! a H – y | a.c` p c k gom/p/61e7844e6…

二、回调函数

上面咱们说了，宏使命与微使命都是异步的，其间包含ajax恳求、计v 6 t 5 I ; b b 2时器等等，咱们初步的了解一下promise，知道他是处理9 ; e ( R . h O w异步的一R d 4 w种办法，那么咱们常用的一共有哪几种办法呢?第一种便是回调函数。

先上代码：
function f2() {
console.log('2222')
}
function f1(callback){
console.log('111')
&emsp;&emsp;setTimeout(function ()C [ 5 {
&emsp;&emsp;&emsp;&emsp;callback();
&emsp;&em# G Fsp;}, 5000);
&emsp;&emsp;console.log('3Z U o $ a [ y l333K u 7 z a 7 l L')
}
f1(f2);
先看下打印值是：
111
3333
五秒后2222

相当于主线程履行完了，会经过回调函数去调用f2函数，这个没什么毛病。可是0 J T s – 7 .看下下面的比如：

现在咱们读取一个文件，fileReader便是一个异步恳求
// 这个异步恳求便是经过回调函数的办法获取的
var reader = new FileReader()
var file = input.files[0]
reader.readAsText(file, 'utf-8Y R |  T e X N W',function(err, data){
if(err){e P R v I T U &
console.log(err)
} else# j p C {
console.log(data)
}
})

现在看起来也很不错，可是假如文件上传出错了，咱们还要在回调里边( V } z做判别，要是咱们读取完这个文件接着要读取多个文件呢？是不是应该这么写：

读取完文件1之后再接着读取文件2、3
var reader = new FileReader()
var file = input.files[0]
reader.readAsText(file1, 'utf-8 L # Z S',function(err1, data1){
if(er8 z ?r1){
console.log(err1)
} else {
console.log(data1)
}
reader.readAsText(file2, 'utf-8',function(err2, data2){
if(err2){
consoU | W Z ? g O qle.log(err2)
} else {
console.log(data2)
}
reader.readAsText= U ) e(file3, 'utf-8',fub * ^ E - ) + ^nction(err3, data3)L  d{
if(err3){
console.log(err3)
} else {
console.log(data3)
}
})
})
})

这么写能够完成需求，可是这个代码的可读性就比较差，看起来就不那么高雅，也便是咱们常说的‘回调地狱’。那么怎样破解这种嵌套式的回调呢？ES6为咱们供给了promise：

三、prom t p –ise

首要咱们从| Y 8 q 0 X字面意思上了解一下什么是promi[ , 1 % – G o { Gse？promise能够翻译成许诺、保证Z @ 1 – d _ 5 r =，这个当地你能够了解为：

女朋友让我干了一件事，虽然还没干完，可是我保证这件事会有一个成果给你，成功（fulfiled）或许失利（rejected），还有一个等候状况（pending）。

仍是先上比如
lel = qt promise = new Promise((resolve,C K N  = 6 reject)e N e ; _ * c => {
setTimeout(() => {
resolve(2000) // 成功今后这个resolve会把成功的成果捕捉到
// reject(2000) // 失利今后这个reject会把失利的成果捕捉{ ~ ? + h g到
}, 1000)
console.log(1111)
})
promise.then(res => {
console; H z k V 3 ( t.log(res) // then里边第一个参数就能拿到捕捉到的成功成果
}, err =>{
console.log(err)// then里边第二个参数就能拿到$ R R t G 8捕捉到的失利成果
})
打印成果：
1111
2000（% $ L / R A一秒今后）

1、then链式操作

Promise目标的then办法回来一个新的Promise目标，因此能够经过链式调用th^ ^ ] S X 8en办法。

then办法接纳两个函数作为参数，第一个参数是Promc c n m ? C | h –ise履行成功时的回调，第二个参数是PromisY R Z y 9e履行失利时的回调，这个上面的比如说的很明白了，第二个参数捕捉的便: 5 A ~ 6 } 3 9 D是失利的回调。

两个函数只会有一个被调用，这句话怎样了解呢？
女朋友让你去做西红柿鸡蛋汤，你要么就去做，要么就不做，叫外q | F卖，必定没有第三种挑选
。

函数的回来! i a W g 6值将被用作创立then回来的Promise目标。这句话应该怎样了解呢？仍是上比如：

let promise = new Promise((resolve, reject) => {
seB n y (tTimeout(() => {
resolve(2000)
}, 1000)
console.log(1111)
})
promise.then4 h A y !  w n t(res =&gy , bt; {
console.log(res) // 这个当地会打印捕捉到的2000
return res + 1000 // 这个函数的回来值，回来的便是这个promise目标捕捉到的成功的值
}).then(res => {
console.log(? ) C .  @ ]res) //这个当地打印的便是上一个promise目标return的值
})
所以打印次序应该是：
1110 A r + R ( -1
2000
3000

方才咱们看到了then接受两个参数，一个是成功的回调、一个是失利的回调，看起来如同也不是那么高雅，promise里除了then还供给了catch办法：

2、catch捕捉操作

这个catch便是专门捕捉错误的回调的，仍是先看比如：

le) Y O @ y ) ] W at promise = new Promise((resolve,} w H u ) g , reject) => {
setTimeout(() => {
reject(2000) // 失利今后这个reject会把失利的成果捕捉到
}, 1000)
console.log(1111)
})
promise.catch(res => {
console.log(res) // catch里边? 7 # 7 H A就能拿到捕捉到的s H m u失利成果
})
打印成果：
1111
2000（一秒今后）

除了then和catch之外，promise还有两个语法，alm % ` / o * 9 [ gl和racE T q ze，咱们也简略用一下：

3、all

现在咱V = a D G [ v : .们有这么一个需求，一共有三个接口A、B、C，有必要三个接口都成功今后，才干建议第四个恳求，怎样完成呢？

链式调用

let getInfoA = new Promise((resolve, reject) => {
conB w Ssole.log('小A开端履行了')
resolve()
}).then(res => {
let getIb ? q + / [ D [nfoB = new Promise((resolve, reje* ` sct) => {
console.log('小B开端履行了')
resolve()
}).then(res => {
let getInfoC = new Promise((resolv X Y { R R $ ~ [e, reject) => {
console.log('小C开端履行了')
resolve()
}).then(res => {
coy 5 { E b h ?nsole.log('全都履行完了！')
})
})
})

一层套一层的，如同不是那么高雅

all

let getInfoA = new Promis6 [ J ) j U u  ae((resolve, reject) => {
console.log('小A开端履行了')
resolve()
})
let getInfo* d d h % a bB = new PromiseV = 7 5 5 X((resoR * s ;lve, reject) => {
console.log('小B开端履行了')
resolve()
})
let getInfoC = new Promise((resolve, reject) =&_ S 6 Tgt; {
console.log('小C开端履行了')
resop 0 $ . 6lve()
})
Promise.all([getInfoA, getInfoB, getInfoC]).then(res =z _ q> {
console.log('全都履行完了！')
})

接纳一个Promise目标组成的数组作为参数，当这个数组一切的Promise` J X +目标状况都变成resolved或许rejs E F w I Uected的时分，它才会去调用then办法。十分完美，十分高雅。

4、race

现在又有一个需求，同样是接口A、B、C，只要有一个响应了，我就能够% / %调接口D，那么怎样完成呢？

传统办法

let getInfoA = new Promise((resolve, reject) =&k l A )  y %gt; {
console.log('小A开端履行了')
setTimeout((err => {
resolve('小A最快')
}),1000)
}).then(res =>{
console.log(res)
})
let getIn6 / e 9 H + HfoU r TB = new Promise((resolve, reject) => {
console.log('小B开端6 A P z 7 m v h y履行了w $ v _')
setTi+ = R v N @ ! N #meout((err => {
resolve('小B最快')
}),1001)
}).then(res =>{
console.log(res)
})
let getInfoC = new Promc } kise((resolve, reject) => {
console.log('小C开端履行了')
setTimeout((err => {
resolve('小C最快')
}),1002)
}).3 Y H l  G .then(reE R _s =>s M * K d M{
console.log(res)
})
打印成果
小A开端履行了
小B开端履行了
小C开端履行了
小A最快

这个办法得写三遍，如同也不是那么高雅，一同来看下race应该怎样% % ; | s k 7 d写？

race

let getInfoA = new Promise((resolve, reject) => {
console.log('小A开端履行了'O _ M 5)
setTimeout((err => {
resolve('小A最快')
}),1000)
})
let getInfoB =S ! Q ~ : s U / n n@ H (ew Promise((resolve, reject) => {
console.log('小B开端履b ) A 3 G a X  c行了')
setTimeout((err => {
resolve('小B最快')
}),1001)
})
let getInfoC = n ( ( W q jew Promise((resk O S j  o .olve, reject) => {
console.log('小C开端履行j T w J了')
setTimeout((o : l 1 $ ( e 6err => {
resolve('小C最快')
}),1002)
})
Promise.race([getInfoA, getInfoB, getInfoC]).then(res => {
console.log(res)
})
打印成果
小A开端履行了
小B开端履S C  R e k Q , }行了
小C开端履行了
小A最快

与Promise.all类似的是，Promise.race都是以一个Promise目标组成的数组作为参数，不同的是，只要当数组中的其间一个Promsie状况变成resolved或许rejected时，就能够调用.J p ~ w ,then办法了。

promiK % m ] # 0 , pse是ES6用来处理异步的一个办法，现在用的j . n k 9 % O现已比较广泛了，像咱们经常用的aA a lxios，他便是用promise封装的，用起来十分便利。

之前聊了异步编程的回调函数和promise，用promise处理异步编程，假如多个调用，a v 8 a M & $ ^ y就会看起来不N T z那么舒服。

es6除了供给了promise还U p n M 6 q Y l M为咱们供W v I y c = n给了愈加强壮的async和awa[ w & b , 5 n it，async、await是Generator函数的语法糖，假如想要完全把握async、await的用法，有必要要把握Generator函数的运用。

四、Generator 函数

1、什么是 Generator 函数？

来自阮一T _ – w t峰老师文档上的解释：Generator函数是协程在 ES6 的完成，最大特色便是能够交出函数的履行权（即暂停履行）。

你能够这么了解，这个函数自己履行不了，得让他人帮忙履行，踢一脚（next()），走一步。

基本的用法：

function* do. B  l PSomething(H [ x 7 !) {
yield '吃饭'
return '睡觉'
}
let newDoSomething = doSoh ] O 2mething()1 n @ J D /K H 5 p m 1 l/ 自己履行不了，需要指向一个状况机
console.log(newDoSomething.next()) // {value: "吃饭", do/ , Bne: fac B o h I H 0 |lse}
console.log(newDoSomething.next()) // {value: "睡觉", done: true}

从上面的比如能够看出来，Generator 函数有四个特色：

1、functiT r 4 /on后边有个小*，这个当地有两种写法，没啥太大区别；

function* doSomething(){}
function *doSomething(){}

2、函数里边会有一个yield，把函数截成不同的状况；

一个yG . { @ C [ield能够截成两个状况，也就需要两个next()触发；

3、GeneratoM c g ~ r Ur函数自己不会履行，而是会回来一个遍历器目标；

4、遍历器目标会经过.next()办法顺次t # $ : l D调用各个状况。

音讯传递

Generator函数除了能操控函数分状况的履行，还有一个十分重要的效果便是p r z 2 #音讯传递，仍是上比如：

func5 ; k ktion *doSomething() {
let x = yield | l G'hhh'
console.log(x)
return (x * 2)
}
le] X @ J } 3 1 & ;t ne1 T 8 D * . & ywDoSomething = doSomething()
console.log(newDoSomething.next(1))
console.log(newDoSometh6 - $ Ging.next(2))
打印成果@ Z 8 }：
{value: "hhh9 j q ; $", done: false}
2
{value: 4, done: true}

具p A G o ;体剖析一下为什么会打印这个：（1 Z e W # 1 I要点）

//{v4 t  A S B . Ralue: "hhh", done: false}
第一个next()是Generator函数的启动器
这个时分打印的是yield后边的值
要点的一句，yield后边的值并不会赋值给x
//2
暂停履行的时分，yield表达式处能够接纳下一个I y V @ Y x x _启动它的next(...)y Z 6 ;传进来的值
你能够了解为：
这个时分第二个next传入的参数会把第一个yield的值替换掉
//{value: 4, done: true}
这个时分，x被赋值2，所以打印2*2

注意几个问题：

第一个next()是用来启动Generator函数的，传值会被忽略，没用

yield的用法和return比较像，你能够当做return来用，假如yield后没值，return un8 S 0 . f 7 E /defined

最终一个next()函数，得到的是函数return的值，假如没有，也是undefined

完全了解了上面的概念，再来看下下面的栗子：

function *doSomething() {
let x =B S L Z yield 'hhh'
let y = yield (x + 3)
let z = yield (y * 3)
return (x * 2L V } p)
}
let newDoSomething = doSometh8 x ( l j Ming()
console.log(6 O PnewDoSomething.next(1))  // {value: "hhh", done: false}
console.log(newDoSomethingg = l J P D.next(2))  // {val} { 1 / Iue: 5, done: fal6 K V v ! 7 I u 2se}
consolN * 9 0e.log(newDoSomething.next(100)) // {value: 300, dop e A t Sne: false}
console.log(newDoSomething.next(1000)) // {value: 4, done: true}

仍是y O ] G *用上面的思路剖析一下：

第一个next(1)，传进去的值没用，打印的是G @ 2 U @ c _ L &yield后的值
第二个next(2)，这个时分的x现已被赋值为2,所以打印2+) T c 03
第三个next(100)，这个时分的y现已被赋值为100,所以打印100*3
第四个next(1000)，这个时分y现) 5 V C已被赋值为1000,,可是打印的 V N J F是x*2，所以打印的4

再来看个X W ? j O d ( A特别的状况：（特别的才是简略掉坑的）

function *doSomething() {
let x = yield 'hhh'
console.log(x)
let y = yield (x + 3)
consX / Y W B , Qole.log(y)
let z = yield (y * 3)
return (x * 2)
}Q A w a v
let newDoSomething = doSomethk 4 s R Z h -ing()
console.log(newl p 4 c Z X r @ GDoSomething.next(1))
console.log(newDoSomethi3 B z l ? = P $ng.next(2))
console.log(newDoSomething.next())
console.log(newDoSomething.next())

看下打印成果：

{value: "hhh"h o I ! x l j, done: false}
2
{value:l g { - P 5, done: false}
und# x D eefined
{value: N: } | a n taN, done: false}
{value: 4, done: true}

剖析下f g o _为什么打印undefined？

1、第一个next(1)传进去的1，| F J ? E . R V S没有起任何意义，打印的{value: "hhh", done: false}；
2、第二个next(2)传进去的2，所以x会打印2，第二个next(2)打印2+3；
3、第三个next(): / i S J传进去的是空，那么y打印的便是未定义，undefined*3那必定便是NaN；
4、第四个next(A [ 9 9 p 3 W X M)传进去的是空，可是return的是x，方才说了x是2，那打印的是2*2

五、async、a! { U $wait

1、什么是async、await？

async、await是Generator函数的语法糖，原理是经过Generator函数加主动履行器来完成的，这就使得async、await跟一般函T i O ^ #数相同了，不用再一向next履行了。

他吸收了Generator函数的优点，能够经过awai# _ o K K Mt来把函数分状况履行，可是又不用一向next，能够主动履行。

仍是上比如：

栗子1! h q v z 1 z R

function f() {
return new Promise(resolve =&I t G & @ ? X hgt;{
resolve('hhh')
})
}
async function doSomething1(){
let x = await f()
}
doSomethin[ 5 = 1 ng1()
打R f B U Q z ` x印成果：
hhh

看了上面的比如，能够看出async有三个特色：

1、函数前面会加一个async修饰符，来证明这个函数是一个异步函  ; W M数；
2、await 是个运算符，用于组成表达式，它会堵塞后边的代码
3、await 假如比及的是 Promise 目标，则得到_ q { E q d T Z =其 resolve值。

栗子2

async functiR F a ~on doSomething1(){
let x = await 'hhh'
return x
}
console.log(X A c n =doSomething1())
doSomething1().then(res => {
console.log(res)
})
打印成果：
Promise{<pendinn F e ^ % & n Dg>}
ht O ghh

剖析一下上面的栗子能够得到这两个* o : 1 L z G ) X特色：

1、async回来的是一个promise目标，函h w u ? x数内s l 1部 return 回来的值，会成为 then 办法回调函数的参数；7 5 i  :
2、awai| T q r M D g /t假如比及的不是promise目标，就得到一个表达式的运算成 ( ;果。

2、async、await项目中的运用

现在有一个封装好的，获取数据的办法，咱们分别用promJ n u 5 / gise、Generator、async来完成发恳求，做一下比较：

function getLih O s x ! ~ Tst() {
return new Promise((resolve, reject) =>{
$axios('/pt/getList').then(res => {
resolve(res)
}, err =>+ | 8 1 | F P 3; {
reject(err)
})
})
}

promise

f& N J g { [ punction initTable() {
getList().then(res => {
console.log(res)
}).catch(err => {
this.$4 Z w R Xmessage(err) // element的语法
})
}
然后直接调用就能够
这么做看起来十分的简练，可是假如多个恳求调用
就会是.then,.then看O h p起来十分不舒服

Generator函数

function *initTable(args) {
const getList = yield getlist(args= t })
return getList
}
f^ e = 9unction getList() {
con& w zst g = initTa3 A %ble(this.searchParams)
c] { K & [ aonst gg = g.next().value
gg.then(res =>{
this.total = res.data.count
if (res.data.list) {
thi4 V I ] js.tableList = res.data.list
th $ F is.tableList.forEach(e: a 6 m x = % c Z => {
e.receiveAmt = format(e.receiveAmt)3 # , ~
})
} else {
this.tableList = []
}
})
}
这个看起来就比较伤，写起来十分费事

async await

async initTable() { // table列表查
const gu # E :etData = await getList(this.searchParams)
return getData
},
getList() {
this.initTable().thz N = nen(res =>{
this.tableList = res.data.list
})
}
这样写如同也很简略，而且十分便利
首要是假如调用多个接口，能够直接多个await

以上是我个人对promise、async、aM N cwait的一点见解，有不对的欢迎各n l N ^ o ]位大佬留言或许加我微信沟通。

个人的微信大众号：小Jerryo i F有话说，平常会发一些技术文章和读书笔记，欢迎沟通。

后边V 8 s x H会持续更新一些js基础的文章，5 O ! D b (长得美观的哥哥姐姐们点个关注呗。

异步解决方案看他就够了（promise、async）（1.1万字）