在JavaScript es6中返回Promise

Question

假设我有一个文件，它正在从api导入一个函数，并对结果执行一些操作。

import api from './api'

const getData = () => {
  api.get(url)
    .then(res => console.log(res))
    .catch(err => console.log(err))
}

我已经看到了两种不同的返回响应的方式，所以错误就会冒出来。

版本1：

get: (url) => {
  return new Promise((resolve, reject) => axios.get(url)
    .then(res => resolve(res))
    .catch(err => reject(err)) )
}

版本2：

get: (url) => {
  return axios.get(url)
    .then(res => {
      if (res.success == 200) {
        return Promise.resolve(res)
      }
      return Promise.reject(res)
    })
}

这两种方法有什么不同？有没有更好或更好的错误处理方法？

Answer 1

一般来说，有两个方便的规则：

1. 如果您的起点是promise (axios.get的返回值)，那么使用new Promise是一种反模式。then和catch已经创建了新的promises.
2. Propagate错误，不要将它们转换为解决方案(当然，直到您处理这些错误的时候，通常在调用链的开始处)。

基于此，在这两个选项中，您将使用版本2，而不是版本1。

版本1有点胡说八道:它会读取分辨率值并将错误转换为分辨率；它总是会解析为undefined。请记住，链的结果是then或catch处理程序中返回(或抛出)的最后一个事件的结果。这两个处理程序不返回或抛出任何东西，因此链使用undefined解决(而不是拒绝)。

版本2做了一些事情:它基于res.success修改promise结果。但它不需要Promise.resolve，它应该是：

get: (url) => axios.get(url).then(res => {
  if (res.success == 200) {
    return res;
  }
  return Promise.reject(res); // Or see note below
})

还有一个阵营--我同意他的观点--认为你应该总是抛出一个Error对象，而不是返回Promise.reject，以获取堆栈跟踪信息。所以：

get: (url) => axios.get(url).then(res => {
  if (res.success == 200) {
    return res;
  }
  throw new Error(res/*...or something else useful here...*/);
})

Answer 2

这两个版本没有真正的区别，在第一个版本中，您创建了一个冗余的Promise。

axios.get，是一个返回Promise的函数，不需要用另一个来包装它。

如果你想改变promise逻辑，你可以使用额外的Promise，这意味着如果你想解决axios promise中发生的任何问题。大概是这样的：

get: (url) => {
  return new Promise((resolve, reject) => axios.get(url)
    .then(res => resolve(res))
    .catch(err => resolve(err)) )
}

但是，通常不是这样的。