Vue.js核心技术解析与uniapp跨平台实战开发学习笔记第9章axios发送HTTP请求9.3.5async与await

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第9章 axios发送HTTP请求

9.3 axios原理之promise

9.3.5 async与await

async和await是编写异步操作的解决方案&＃xff0c;是建立在promise基础上的新写法&＃xff0c;两者同时使用&＃xff0c;如果在方法中使用了await&＃xff0c;那么方法前必须加上async。

【async函数】

作用&＃xff1a;返回promise对象

async的右侧是一个函数&＃xff0c;函数的返回值是promise对象

举个栗子&＃xff1a;

async function fn1(){return "hello async"
}const res &＃61; fn1()
console.log(res)


运行结果

既然返回了promise对象&＃xff0c;获取数据就使用.then方法&＃xff0c;并且设置成功的回调函数和失败的回调函数

async function fn1(){return "hello async"
}const res &＃61; fn1()
res.then(value &＃61;> {console.log(value)},reason &＃61;> {console.log(reason)}
)


也可以直接在fn1函数中设置返回失败的数据

• async函数的返回值为promise对象
• promise对象的结果&＃xff0c;由async函数执行的返回值决定

【await表达式】

作用&＃xff1a;等待async函数执行完成&＃xff0c;并返回async函数成功的值。

举个栗子

async function fn1(){return "hello async"
}async function fn2(){const res &＃61; await fn1()console.log(res)
}
fn2()


fn1()函数返回值是promise对象&＃xff0c;在fn2()函数中&＃xff0c;await获取到的是hello async&＃xff0c;表示使用await可以直接获取到promise对象成功的值&＃xff0c;不需要再使用.then()方法。

运行效果&＃xff1a;

await必须写在async函数中

async函数可以没有await

上个栗子中&＃xff0c;如果fn1()函数的返回值是promise&＃xff0c;并且是成功的数据&＃xff0c;如果是失败的数据…

举个栗子

因此&＃xff0c;await只能等待promise对象返回成功的数据&＃xff0c;如果promise返回的是失败的数据&＃xff0c;直接使用await就报错了。

这个时候应该使用try/catch获取失败结果

OK