async/await
是 JavaScript 中用于处理异步操作的一种语法糖,它使得异步代码看起来像同步代码一样直观和易读。它是用同步的语法写异步的代码。
1. 基础概念
一,async:关键字用于声明一个函数是异步的。一个标记为 async
的函数总是返回一个 Promise
对象。
二,await:关键字仅能在 async
函数内部使用,用于等待一个 Promise
完成并返回其结果。它会暂停当前的 async
函数的执行,直到 Promise
完成,然后继续执行 async
函数,并返回解析后的 Promise
值。
2.async和await与Promise的关系
1,执行async函数,返回的是一个promise对象 2,await相当于promise的then 3,try...catch可捕获异常,代替了Promise的catch
<script>
async function fn(){
return "张三"//在这里直接return相当于Promise.resolve("张三")
}
console.log(fn())
</script>
直接使用async它返回的是一个Promise对象,
在使用then来看一下,这里的res还是等于return的这个值
<script>
async function fn(){
//return "张三"
return Promise.resolve("张三")
}
console.log(fn())//返回的还是Promise
fn().then(res=>{
console.log(res)//这里的结果还是为张三
})
</script>
在立即执行函数中的情况
(async function f() {
const f1 = Promise.resolve("李四")
//这里的结果是返回值
const result = await f1;
console.log(result)//李四
})();
又或者
(async function f() {
//这里的结果是返回值
const result = await "李四";
console.log(result)//李四
})();
使用try...catch捕获异常
(async function f() {
let res = Promise.reject("error")
const result = await res
console.log(result)//李四
})();
如果Promise.reject页面直接报错
使用后的try...catch可以正常输出
(async function f() {
let res = Promise.reject("error")
try {
const result = await res;
console.log(result)//李四
}catch (e) {
console.log(e)
}
console.log("success")
})();
调用一个函数
<script>
function timeOut() {
return new Promise(resolve => {
setTimeout(()=>{
console.log("hi")
resolve()
},1000)
})
}
async function fn() {
timeOut();
console.log('result')
}
fn()
//结果,先输出result在输出hi
</script>
加上await
<script>
function timeOut() {
return new Promise(resolve => {
setTimeout(()=>{
console.log("hi")
resolve()
},1000)
})
}
async function fn() {
await timeOut();
console.log('result')
}
fn()
//加上await之后,需要先等待timeout执行完成之后在在执行下面的
//输出为hi result
</script>
带返回值的情况
<script>
function timeOut() {
return new Promise(resolve => {
setTimeout(()=>{
console.log("hi")
resolve('async await')
},1000)
})
}
async function fn() {
let res=await timeOut();
console.log(res)
console.log('result')
}
fn()
//先输出hi在输出res,然后是result
</script>
3.async和await的应用
1,执行串行操作
<script>
function timeOut1() {
return new Promise(resolve => {
resolve(1)
})
}
function timeOut2(){
return 2
}
function timeOut3(){
return 3
}
async function fn() {
let res1=await timeOut1();
console.log(res1)
let res2= await timeOut2()
console.log(res2)
let res3= await timeOut3()
console.log(res3)
console.log('result')
}
fn()
//分别输出1,2,3和result
</script>
2,当你需要从外部 API 获取数据时,可以使用 async
和 await
来等待响应。
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
3,当需要从一个异步函数返回一个值,并在另一个异步函数中使用这个值时,可以使用 async
和 await
<script>
async function fetchData() {
const response = await fetch('https://api.demo.com/data');
const data = await response.json();
return data;
}
async function processData() {
const data = await fetchData();
// 对 data 进行处理
console.log(data);
}
processData();
</script>