异步函数async(异步函数执行顺序)

异步函数async 什么是同步异步

推荐整理分享异步函数async(异步函数执行顺序)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:异步函数同步执行,异步函数中需要等数据获取完,wx.navigateTo才跳转,异步函数同步执行,异步函数同步执行,异步函数是什么意思,异步函数有哪些,异步函数的作用,异步函数和同步函数,内容如对您有帮助，希望把文章链接给更多的朋友！

在最新的ES7（ES2017）中提出的前端异步特性：async、await。 在了解async和await之前得先明白什么是同步函数，什么是异步函数。

同步函数：当一个函数是同步执行时，那么当该函数被调用时不会立即返回，直到该函数所要做的事情全都做完了才返回。比如说在银行排队办理业务，要等到前面一个人办完才能到下一个。异步函数：如果一个异步函数被调用时，该函数会立即返回尽管该函数规定的操作任务还没有完成。比如一个人边吃饭，边看手机，边说话，就是异步处理的方式。async

async从字面意思上很好理解，是异步的意思，async用于申明一个function是异步的，函数返回的是一个promise。

async作为关键字放到函数前面，用于表示函数是一个异步函数。该函数的执行不会阻塞后面代码的执行。async函数返回的是一个promise对象，可以调用then方法获取到promise的结果值。async function f() { return 1; } f().then((res) => { console.log(res) }) //1

async函数会返回一个promise对象，如果function中返回的是一个值，async直接会用Promise.resolve()包裹一下返回。

await

await有等待的意思，等待一个异步方法执行完成。

await关键字只能放async函数里面。 而async函数里不是必须有await。await关键字的返回结果就是其后 promise执行的结果值，是resolved或者 rejected后的值。function getSomething() { return "something"; } async function testAsync() { return Promise.resolve("hello async"); } async function test() { const v1 = await getSomething(); const v2 = await testAsync(); console.log(v1, v2); } test(); // something hello async 为什么await关键词只能在async函数中用

await操作符等的是一个返回的结果，那么如果是同步的情况，那就直接返回了。

那如果是异步的情况呢，异步的情况下，await会阻塞整一个流程，直到结果返回之后，才会继续下面的代码。

阻塞代码是一个很可怕的事情，而async函数，会被包在一个promise中，异步去执行。所以await只能在async函数中使用，如果在正常程序中使用，会造成整个程序阻塞，得不偿失。

async/await

异步代码就像写同步代码一样，也避免了回调地狱。

串行：等待前面一个await执行后接着执行下一个await，以此类推async function asyncAwaitFn(str) { return await new Promise((resolve, reject) => { setTimeout(() => { resolve(str) }, 1000); })}const serialFn = async () => { //串行执行 console.log(await asyncAwaitFn('string 1')); console.log(await asyncAwaitFn('string 2')); console.timeEnd('serialFn ')}serialFn();

并行：将多个promise直接发起请求（先执行async所在函数），然后再进行await操作async function asyncAwaitFn(str) { return await new Promise((resolve, reject) => { setTimeout(() => { resolve(str) }, 1000); })}const parallel = async () => { //并行执行 const parallelOne = asyncAwaitFn('string 1'); const parallelTwo = asyncAwaitFn('string 2') //直接打印 console.log(await parallelOne) console.log(await parallelTwo) console.timeEnd('parallel')}parallel()

async、await错误处理

在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。

async function catchErr() {try {const errRes = await new Promise((resolve, reject) => {setTimeout(() => {reject("http error...");}, 1000););//平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功// console.log(errRes.status, errRes.statusText); } catch(err) { console.log(err); }}catchErr(); //http error...

虽然async、await也使用到了Promise但是却减少了Promise的then处理使得整个异步请求代码清爽了许多。

前面扯了这么多，也是时候回到正题了，我们先来看下面的一个例子。 我们需要做一个功能，在页面加载的时候实现查询三组数据：查询用户、查询朋友、查询图片。

class Api { constructor () { this.user = { id: 1, name: 'test' } this.friends = [ this.user, this.user, this.user ] this.photo = 'not a real photo' } getUser () { return new Promise((resolve, reject) => { setTimeout(() => resolve(this.user), 200) }) } getFriends (userId) { return new Promise((resolve, reject) => { setTimeout(() => resolve(this.friends.slice()), 200) }) } getPhoto (userId) { return new Promise((resolve, reject) => { setTimeout(() => resolve(this.photo), 200) }) } throwError () { return new Promise((resolve, reject) => { setTimeout(() => reject(new Error('Intentional Error')), 200) }) }}

在上面定义了API的类，里面写了三个封装的查询接口。现在要依次执行那三个操作。 第一种方法：Promises的嵌套：

function callbackHell () { const api = new Api() let user, friends api.getUser().then(function (returnedUser) { user = returnedUser api.getFriends(user.id).then(function (returnedFriends) { friends = returnedFriends api.getPhoto(user.id).then(function (photo) { console.log('callbackHell', { user, friends, photo }) }) }) })}

从上面可以看出，这代码块很简单，但它有很长、很深的嵌套。

这只是简单的函数内容，但在真实的代码库中，每个回调函数可能会很长的代码，这就可能会导致代码变得庞大难读懂。处理此类代码，在回调内的回调中使用回调，通常称为“回调地狱”。

更糟糕的是，没有错误检查，因此任何回调都可能作为未处理的resove/reject而失败。 第二种方法：Promises链：

function promiseChain () { const api = new Api() let user, friends api.getUser() .then((returnedUser) => { user = returnedUser return api.getFriends(user.id) }) .then((returnedFriends) => { friends = returnedFriends return api.getPhoto(user.id) }) .then((photo) => { console.log('promiseChain', { user, friends, photo }) })}

Promises的一个不错的功能是，可以通过在每个回调中返回另一个Promises来链接它们。这样，我们可以将所有回调保持在相同的缩进级别。我们还可以使用箭头函数来简化回调函数的