async await 接口获取数据两种方式的区别是什么？

Question

方法一：
// api.js
export async function getNewsList(data = {}) {
  return await request({
    url: `/news/getList`,
    method: 'post',
    data
  })
}
// 调用
getNewsList(param).then((res) => {
  console.log(res)
})

方法二：
// api.js
export function getNewsList(data = {}) {
  return request({
    url: `/news/getList`,
    method: 'post',
    data
  })
}
// 调用
async getList() {
    const res = await getNewsList(data)
}

我理解的async await 返回的是promise, 所以使用.then的方法获取数据，那方法二const res 为什么可以直接获取到值呢？

这两种写法有什么区别呢？
求大神指教。

Answer 1

方法一：
// api.js

export async function getNewsList(data = {}) {
// 在这个上下文中等待请求  而方法二是在getList下文中等待请求
  const res = await request({
    url: `/news/getList`,
    method: 'post',
    data
  })
return res
}
// 调用
async getList() {
    const res = await getNewsList(data)
}

所以方法一和方法二唯一的区别是方法一请求报错需要在方法一里面catch （）

Answer 2

那方法二const res 为什么可以直接获取到值呢？

const res = await promise 的意思大概是，生成一个 promise.then((x)=>{}) ，然后在回调里将 x 返回作为 await promise 的返回值，之后继续执行（await promise 语句所在的）函数的剩余部分。

Answer 3

其实我觉得第二种方式才是正经用法。

第一种方式：async函数返回一个 Promise 对象。
async函数内部return语句返回的值，会成为then方法回调函数的参数。

返回 Promise 对象

第二种方式：await会接收Promise使用resolve返回结果，所以可以进行复制操作。

等待 Promise 的兑现

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。