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

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

第9章 axios发送HTTP请求

9.3 axios原理之promise

9.3.5 async与await

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

【async函数】

作用：返回promise对象

async的右侧是一个函数，函数的返回值是promise对象

举个栗子：

async function fn1(){
  return "hello async"
}

const res = fn1()
console.log(res)
1
2
3
4
5
6

运行结果

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

async function fn1(){
  return "hello async"
}

const res = fn1()
res.then(
  value => {
    console.log(value)
  },
  reason => {
    console.log(reason)
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13

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

• async函数的返回值为promise对象
• promise对象的结果，由async函数执行的返回值决定

【await表达式】

作用：等待async函数执行完成，并返回async函数成功的值。

举个栗子

async function fn1(){
  return "hello async"
}

async function fn2(){
  const res = await fn1()
  console.log(res)
}
fn2()
1
2
3
4
5
6
7
8
9

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

运行效果：

await必须写在async函数中

async函数可以没有await

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

举个栗子

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

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

OK