都是为了解决异步回调产生的。
Promise的字面意思是“承诺”,即承诺会执行。Promise好比容器,里面存放着一些未来才会执行完毕的事件的结果,而这些结果一旦生成是无法改变的。
async和await遵循的是Generator 函数的语法糖,他拥有内置执行器,不需要额外的调用直接会自动执行并输出结果,它返回的是一个Promise对象。
底层代码是怎样的?
promise的精髓是状态的传递,方法的封装者并不需要关心异步方法的执行结果,方法的封装者通过状态传递拿到执行结果书写自己的逻辑,使得封装者与使用者的真正解耦。
这种状态传递有种发布订阅的味道,回调地狱并非书写上的地狱而诟病,promise 的链式调用也会有地狱之感,而回调地狱真正为之诟病的是没有真正解耦。async 是 promise 的语法糖。
在之前没有promise的时候,我们处理多个异步请求回调是一层一层嵌套的,第一个函数的输出是第二个函数的输入,比如:
ajax.get(url, function(id) { ajax.get({id}, function() { ajax.get({name}, function() { ...... }) }) })
如果业务逻辑复杂,且基本上我们对于请求回来的数据还得做一系列的处理,这样的代码对于后期的可阅读性和可维护性都十分不友好,那么promise的链式调用就解决了多层异步嵌套回调的问题,且代码可读性和可维护性都会提高。
promise有三种状态pending、fulfilled、reject
new Promise调用的时候需要传入一个executor执行器函数,该函数会立即执行;
executor函数接收两个参数,resolve,reject,分别对应异步请求成功执行和失败执行;
设置默认状态stratus为pending,请求成功状态下的值为value,默认值为undefined,请求失败下的值为reason,默认值为unfined
promise的状态值只能从pending -> fulfilled 或者 pending -> reject,状态一旦确定就不会再改变
promise有一个then方法,接收两个参数onFulfilled、onRejected,分别为异步请求成功的回调和失败的回调。
promise的使用
function getJSON() { return new Promise((resolve, reject) => { setTimeout(() => { let json = Math.random() * 2 if (json > 1) { resolve(json) } else { reject(json) } }, 2000) }) } const makeRequest = () => getJSON() .then(data => { console.log('data==>', data) return 'done' }) .catch(err => { console.log('err==>', err) }) makeRequest()
要理解async函数,首先得来了解一下Generator函数。因为 async和await遵循的是 Generator 函数的语法糖
Generator函数生成器的理解:
是es6引入的一个数据类型,相当于一个状态机,内部封装了很多状态,同时返回一个迭代器对象。可以通过这个迭代器遍历相关的值和状态。
Generator的显著特点是可以多次返回,每次的返回值作为迭代器的一部分保存下来,可以被我们显式调用。
Async/Await的使用
function getJSON() { return new Promise((resolve, reject) => { setTimeout(() => { let json = Math.random() * 2 if (json > 1) { resolve(json) } else { reject(json) } }, 2000) }) } const makeRequest = async () => { const value = await getJSON() console.log(value) return value } makeRequest()