jsPromise与async-await用法详解

     jsPromise与async/await用法详解                  目录异步PromisePromise基本使用Promise回调可接受入参Promise可进行连续回调async/await常见异步请求方法与Promise、async/await的关系异步完全不了解同步异步可以看看这个：一分钟简单理解同步和异步leta=0setTimeout(()=>{a=1},1000)console.log(a)//0此时这个延迟就成为异步执行的了，a值还没有变1就被使用输出，我们只能得到0。Promise有时候我们不得不进行异步操作，比如从后台请求数据，我们需要时间，等待它得到数据后再使用。也就是我们希望异步内容也能够类似同步一样。Promise就是一种es6出现的异步解决方案。Promise基本使用newPromise()内接收一个函数，入参为resolve,rejectPromise内的函数将可以执行任意时长，执行到调用resolve()或reject()，我们此处把它放在延迟1s后执行，此时a已经被赋值为1，因此就可以得到被赋值后的a。resolve()进入.then也就是执行成功回调，reject()进入.catch也就是手动执行错误进入捕获异常，reject()用的较少。leta=0newPromise((resolve,reject)=>{setTimeout(()=>{a=1resolve()},1000)}).then(()=>{console.log(a)//1}).catch(()=>{})Promise回调可接受入参.then中的回调函数可以存在入参，入参为resolve()手动传入，此处res便是传入的a值。（.catch与reject()同理）leta=0newPromise((resolve,reject)=>{setTimeout(()=>{a=1resolve(a)},1000)}).then((res)=>{console.log(res)//1}).catch(()=>{})Promise可进行连续回调回调函数中接受返回一个新的Promise进行下一步回调。Promise.resolve(res)在res为普通数据时等同于newPromise并且resolve(res)再异步回调中直接返回普通数据也可当作接受了一个新的Promise进行下一步回调leta=0newPromise((resolve,reject)=>{setTimeout(()=>{a=1resolve(a)},1000)}).then((res)=>{returnnewPromise((resolve,reject)=>{resolve(res)})//等同于//returnPromise.resolve(res)//等同于//returnres}).then((res)=>{console.log(res)//1}).catch(()=>{})async/awaitPromise的回调是可以帮我们解决了异步数据延迟的问题，但是当回调次数过多时，代码将会变得不优雅且异常难以理解，这就是回调地狱问题。因此es7出现了async/await，用于解决回调地狱问题。async/await有一个限制就是必须在函数中使用，因此我们将代码包进一个函数，并在函数前加上async，这样我们便可以在函数中使用await关键字。consttest=async()=>{leta=0...}test()await用在哪里呢？用在.then回调前的Promiseawait后面跟着Promise，而它的返回值便是回调时resolve()传来的值，代替了回调函数，看起来代码一下子就清晰很多了。consttest=async()=>{leta=0constres=awaitnewPromise((resolve,reject)=>{setTimeout(()=>{a=1resolve(a)},1000)})console.log(res)//1}test()常见异步请求方法与Promise、async/await的关系常见异步请求方法有：fetch、jq的ajax、axios等fetch就是基于Promise的，回调的形式进行请求，所以也可以结合async/await非常方便的使用，详见：fetch异步请求使用详解jq的ajax和axios也是同理，存在回调基本都是基于Promise的，我们只要将.then之前的部分看作Promise放在await后面，用一个变量接收回调结束返回的数据即可。 -全文完-