时间戳

首页 > 解决方案 > 不能在导出函数上使用等待？

reactjs - 不能在导出函数上使用等待？

问题描述

我有一个围绕 Axios 的 APIService 包装器，我返回它并使用 .then() 来处理承诺，但现在我想使用 async/await；我想知道为什么我的功能在这种新情况下不再起作用；因为我在返回之前只向 Axios 实例添加了几个配置。

转向 async/await 的逻辑是因为这似乎是使用 nextjs 和 getInitialProps 的最佳实践方式。

我的 APIService.js；

import axios from "axios";
import { API_URL } from './constants';

const config = {
  baseURL: API_URL,
};

const APIService = axios.create(config);

APIService.interceptors.request.use(request => {
  const token = 'blah;
  request.headers.Authorization = token ? `Bearer ${token}` : '';
  return request;
});

APIService.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // do something
      return true;
    }
    return Promise.reject(error);
  },
);

export default APIService;

我希望上述函数在这样调用时能够工作；

import APIService from '../../utils/APIService';

Page.getInitialProps = async function({ res, query }) {

  const req = await APIService.get('/endpoint', {});

  const { data } = req;

  return {
    data
  };
};

我应该如何重构我的 APIService 以在上述情况下工作，以及为什么需要重构，因为我不操纵 Axios 函数的工作方式......

标签： reactjsaxioses6-promisenext.js

解决方案

await不能在顶层使用，它必须在异步函数中。有一种常见的做法可以解决此问题，但不建议这样做：

(async function() {
  const response = await APIService.get('/endpoint', {});
  ...
}());

// or

(async function() {
  const response = await APIService.get('/endpoint', {});
  ...
}()).then(...);

有一个建议允许在顶层进行异步导入，但它仍处于第 3 阶段。您可以在本文中阅读有关此主题的更多信息

推荐阅读