使用axios和promise API

envsm3lx 于 2022-11-23 发布在 iOS

关注(0)|答案(2)|浏览(207)

我在React应用程序中使用基于promise的钩子从API获取异步数据。
我还使用Axios，一个基于承诺的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);

axios

来源：https://stackoverflow.com/questions/60625485/using-axios-with-promise-api

2条答案

按热度按时间

kpbwa7wx1#

哦，伙计。我想你对Promises的工作原理有一个根本性的误解。首先，axios已经默认返回了一个Promise。所以你的整个getData的第一个函数可以简化为：

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

但是代码的内容似乎表明你需要一个可查询的Promise --这样你就可以检查它的状态了。

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等...
我实际上并没有运行上面的内容，我可能忘记了一两个括号，但希望这能有所帮助。
我必须承认--我还没有见过这样的东西在野外使用过。我很想知道你到底想用它来完成什么。

赞(0）回复(0）举报 2022-11-23

ttygqcqt2#

Axios本身会返回一个承诺，但是如果你想在每次API调用后创建一个具有自定义逻辑的自定义类，那么你可以使用拦截器，我也有同样的要求，这就是我在每次API调用上应用自定义逻辑后返回承诺的方式。
拦截器将在您发出每个请求之前和之后分别执行，因此如果我们想修改请求或响应，我们可以简单地使用它们。
这是我的工作解决方案，请看一下。

callApi = (method, endpoint, params) => {

    this.apiHandler.interceptors.request.use((config) => {
        config.method = method
        config.url = config.baseURL + endpoint
        config.params = params
        return config
    })

    return new Promise((resolve, reject) => {
        this.apiHandler.interceptors.response.use((config) => {
            if (config.status == 200) {
                resolve(config.data)
            } else {
                reject(config.status)
            }
            // return config
        }, error => reject(error))

        this.apiHandler()
    })
}

下面是调用此函数的代码

helper.callApi("get", "wo/getAllWorkOrders").then(d => {
    console.log(d)
})

赞(0）回复(0）举报 2022-11-23

我来回答

使用axios和promise API

2条答案

相关问题

热门标签

最新问答