将 axios 与 promise API 结合使用

Question

我在 React 应用程序中使用基于承诺的钩子从 API.

中获取异步数据

我也在使用 Axios，一个基于 promise 的 http 客户端来调用 API。

在另一个 promise 中使用基于 promise 的客户端是一种反模式吗？下面的代码似乎不起作用。

const getData = () => {
  return new Promise((resolve, reject) => {
    const url = "/getData";
    axios.get(url)
      .then(function(response) {
        resolve(response);
      })
      .catch(function(error) {
        reject(error);
      });
  });

const useAsync = (asyncFunction) => {
  const [value, setValue] = useState(null);

  const execute = useCallback(() => {
    setPending(true);
    setValue(null);
    setError(null);
    return asyncFunction()
      .then(response => setValue(response))
      .catch(error => setError(error))
      .finally(() => setPending(false));
  }, [asyncFunction]);

  useEffect(() => {
      execute();
  }, [execute]);

  return { execute, pending, value, error };
};
};

const RidesList = () => {
  const {
    pending,
    value,
    error,
  } = useAsync(getData);

Answer 1

天哪。我认为您对 Promises 的工作原理存在根本性的误解。首先，axios默认已经returns一个Promise。所以 getData 的第一个函数可以简化为：

const getData = () => {
  const url = "/getData"
  return axios.get(url)
}

但是您的代码的内容似乎表明您想要一个可查询的 Promise - 因此您可以出于任何原因检查它的状态。这是一个你如何做的例子，改编自 this snippet:

function statusPromiseMaker(promise) {
  if (promise.isResolved) return promise
  let status = {
    pending: true,
    rejected: false,
    fulfilled: false
  }
  let result = promise.then(
      resolvedValue => {
        status.fulfilled = true
        return resolvedValue
      },
      rejectedError => {
        status.rejected = true
        throw rejectedError
      }
    )
    .finally(() => {
      status.pending = false
    })

  result.status = () => status
  return result
}

通过这种方式，您可以执行类似 let thing = statusPromiseMaker(getData()) 的操作，如果您查找 thing.status.pending，您将得到 true 或 false 等...

我实际上没有运行以上内容，我可能忘记了一两个括号，但希望这对您有所帮助。

我不得不承认 - 我从未见过在野外使用过这样的东西。我很想知道你实际上想通过这个来完成什么。

将 axios 与 promise API 结合使用

using axios with promise API

reactjs

es6-promise

axios

react-hooks