使用Promise时Service返回数据无法传递到Context的原因

问题描述 #

我从服务器获取数据，在客户端搭建了如下service处理请求：

const serviceSyncFollowedArtists = async userId => {
  if (!userId) return

  const { data } = await axios.get(`${httpLink}/sync`, {
    params: {
      accessToken,
      userId,
    },
  })
  return data
}

该service在context中的调用代码如下，运行完全符合预期：

const syncFollowedArtists = async () => {
  await spotifyService
    .serviceSyncFollowedArtists(user.userId)
    .then(res => {
      if (res.length === 0) return
      dispatch({
        type: 'SYNC',
        data: res,
      })
    })
    .catch(err => {
      console.log(err)
    })
}

但此前我用Promise链式调用的方式编写这个service时，虽然内部能成功获取到服务器返回的数据，但返回给context中的函数时却得到undefined：

const serviceSyncFollowedArtists = async userId => {
  if (!userId) return

  await axios
    .get(`${httpLink}/sync`, {
      params: {
        accessToken,
        userId,
      },
    })
    .then(res => {
      return res.data
    })
    .catch(err => {
      console.log(err.message)
    })
}

原因分析 #

• 外层async函数没有显式返回值：你在.then()回调里返回了res.data，但这个返回值只属于.then()函数本身，并没有被传递到外层的async函数中。而外层async函数因为没有写return语句，所以默认返回undefined。
• 正确的写法有两种：
  1. 直接返回Promise链的结果，让上层可以拿到返回值：

     const serviceSyncFollowedArtists = async userId => {
       if (!userId) return
     
       return axios
         .get(`${httpLink}/sync`, {
           params: {
             accessToken,
             userId,
           },
         })
         .then(res => {
           return res.data
         })
         .catch(err => {
           console.log(err.message)
           // 建议重新抛出错误，让调用方的catch能捕获到
           throw err
         })
     }
     

  2. 就是你最开始能正常运行的写法——用await接收axios请求的结果，然后显式return data，这样外层async函数就能把数据返回给调用方。
• 另外注意：你的catch块只打印了错误却没有重新抛出，这会导致错误被“吞掉”，调用方无法感知请求失败，建议在catch里加上throw err，让上层的错误处理逻辑生效。

内容的提问来源于stack exchange，提问作者smoothlikebutter