10、async 函数
10.1、基本用法
用于声明异步函数,返回值为一个 Promise 对象,它以类似 同步 的方式来写异步方法。可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。(async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。)
下面是一个例子。
async function getStockPriceByName(name) { const symbol = await getStockSymbol(name); const stockPrice = await getStockPrice(symbol); return stockPrice; } getStockPriceByName('goog').then(function (result) { console.log(result); });
async 函数有多种使用形式。
// 函数声明 async function foo() {} // 函数表达式 const foo = async function () {}; // 对象的方法 let obj = { async foo() {} }; obj.foo().then(...) // 箭头函数 const foo = async () => {};
10.2、返回 Promise 对象
async函数返回一个 Promise 对象。
async函数内部return语句返回的值,会成为then方法回调函数的参数。
async function f() { return 'hello world'; } f().then(v => console.log(v)) // "hello world"
上面代码中,函数f内部return命令返回的值,会被then方法回调函数接收到。
async函数内部抛出错误,会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
async function f() { throw new Error('出错了'); } f().then( v => console.log('resolve', v), e => console.log('reject', e) ) //reject Error: 出错了
10.3、await 命令
- await 后面接 Promise
1.await p1相当于是 p1.then,并且只是成功态的then
2.await 和 then 的区别就是:then还需要传回调进去,但 await 可以直接得到值
async function(){ const p1 = Promise.resolve(300) //一个成功态的promise对象,且传了result为300 const res = await p1 // return 值 console.log(res) // 300 } await 和 then 的区别: fn().then( data=>{ console.log(data) } ) //await直接通过返回值来接收data, return data const res = await fn()
- await 接收值
1.await后面跟的不是promise对象而是数值时,会自动包装成成功态的promise对象
2.并且传值给 resolve 为400
async function(){ const res = await 400 //Promise.resolve(400) console.log(res) //400 }
- await 接 async 函数
async function fn(){ return 400 } async function(){ const res = await fn() //fn()会返回promise对象,原理一样 console.log(res) //400 }
- await 接promise 为空
1.什么都打印不出来
2.因为 new Promise 里面没有任何状态改变,而await一直在等待状态改变
3.只有状态改变了,await才会允许执行后面的代码
async function(){ const p = new Promise(()=>{}) const res = await p console.log(res) console.log("success") }
- await 接 promise 为 error
1.会出现报错
2.await相当于成功态的 .then ,都没有成功,因此不会执行后面的代码
3.解决:使用 try…catch 偷偷解决掉 error,保证代码运行
——捕获到错误就不会影响后面的输出
async function(){ const p = Promise.reject("error") const res = await p console.log(res) console.log("success") }) //什么都打印不出来
async function(){ const p = Promise.reject("error") try{ const res = await p console.log(res) }catch(error){ console.log(error) } console.log("success") } //打印出 error 和 success
10.4、使用await的注意点
1、await命令只能用在async函数之中,如果用在普通函数,就会报错。
2、await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中。
console.log(‘reject’, e) ) //reject Error: 出错了
### 10.3、await 命令 - await 后面接 Promise 1.await p1相当于是 `p1.then`,并且只是成功态的`then` 2.await 和 then 的区别就是:then还需要传回调进去,但 await 可以直接得到值
async function(){ const p1 = Promise.resolve(300) //一个成功态的promise对象,且传了result为300 const res = await p1 // return 值 console.log(res) // 300 } await 和 then 的区别: fn().then( data=>{ console.log(data) } ) //await直接通过返回值来接收data, return data const res = await fn()
- await 接收值 1.await后面跟的不是promise对象而是数值时,会自动包装成成功态的promise对象 2.并且传值给 resolve 为400
async function(){ const res = await 400 //Promise.resolve(400) console.log(res) //400 }
- await 接 async 函数 ```javascript async function fn(){ return 400 } async function(){ const res = await fn() //fn()会返回promise对象,原理一样 console.log(res) //400 }
- await 接promise 为空
1.什么都打印不出来
2.因为 new Promise 里面没有任何状态改变,而await一直在等待状态改变
3.只有状态改变了,await才会允许执行后面的代码
async function(){ const p = new Promise(()=>{}) const res = await p console.log(res) console.log("success") }
- await 接 promise 为 error
1.会出现报错
2.await相当于成功态的 .then ,都没有成功,因此不会执行后面的代码
3.解决:使用 try…catch 偷偷解决掉 error,保证代码运行
——捕获到错误就不会影响后面的输出
async function(){ const p = Promise.reject("error") const res = await p console.log(res) console.log("success") }) //什么都打印不出来
async function(){ const p = Promise.reject("error") try{ const res = await p console.log(res) }catch(error){ console.log(error) } console.log("success") } //打印出 error 和 success
10.4、使用await的注意点
1、await命令只能用在async函数之中,如果用在普通函数,就会报错。
2、await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中。