async,await
- async：‘异步’
- await:‘等待’
async作为一个关键字放到函数前面
- 任何一个async函数都会隐式返回一个promise
await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
async/await 让异步代码看起来、表现起来更像同步代码
基本使用
<script>
async function queryData() {
// 1.2 await关键字只能在使用async定义的函数中使用,await后面可以直接跟一个 Promise实例对象
var ret = await new Promise(function(resolve, reject){
setTimeout(function(){
console.log('timeout')
resolve('nihao')
},5000);
})
console.log('hahaha')
return ret;
}
queryData().then(function(data){
console.log('then')
console.log(data)
})
console.log('finish')
</script>
由于异步函数和Promise之前加了await关键字，所以，在调用函数时，先输出的只有finish(异步)，其他的都要等待。
如果不加async和await关键字：
结果为：
async 函数处理多个异步函数
之前使用的axios.get().then()的写法也可以改为：
<script>
//设置请求头
axios.defaults.baseURL = 'http://localhost:5000';
async function queryData() {
// 2.1 添加await之后 当前的await 返回结果之后才会执行后面的代码
var info = await axios.get('/get_news');
//2.2 让异步代码看起来、表现起来更像同步代码
console.log('hello')
console.log(info)
console.log(info.data)
}
queryData()
</script>
运行：
当我们要通过axios访问多个服务器接口时，并且还要前后有联系：
比如：当访问购物车中商品的数量后，根据数量再传给后台进行相应操作。这样两个axios就有了联系，这时候可以使用async函数和await关键字，使用异步等待进行访问。
<script>
//设置请求头
axios.defaults.baseURL = 'http://localhost:5000';
async function queryData() {
// 2.1 添加await之后 当前的await 返回结果之后才会执行后面的代码
var info = await axios.get('/get_news');
//2.2 让异步代码看起来、表现起来更像同步代码
console.log('hello')
console.log(info)
console.log(info.data)
var ret = await axios.get('/get_comment');
console.log(ret.data)
}
queryData()
运行：
这个不错的字符串出现的稍晚于上边的数据。这就是await的作用。
这也就是对之前的axios.get().then()代码的改写，让代码看起来不想像异步。
- 以前的axios要得到结果要使用then(函数)回调函数得到数据，用多了还是会有回调地狱，
- 那么加上async awit关键字，就相当于等待axios请求回应后，通过之前的回调函数的返回值(更底层一点就是Promise对象的resolve函数)拿到数据。那么就可以不适用then方法得到返回的数据。
然而上边的异步函数没有写返回值，那么在函数最后把数据返回
return ret.data
通过调用函数：
ret.data是字符串，但是在async的作用下，把ret.data转换为Promise对象。
queryData()返回的是Promise对象，Promise对象再调用then()可以拿到其中的数据。
queryData().then(function(data){
console.log(data)
})
也可以再使用async和await封装为一个异步函数进行调用。
