代码之家 › 专栏 › 技术社区 › SkyeBoniwell

如何隔离和提取常见的AXIOS调用以防止代码重复?

axios promise ecmascript-6 javascript

SkyeBoniwell · 技术社区 · 6 年前

我试图将一组AXIOS调用转移到一个单独的实用程序文件中,这样我就可以共享它们,并且避免在各处重写相同或类似的AXIOS调用。

但是,我不知道如何做到这一点,仍然可以利用 then 和 catch 调用的一部分,我在其中执行一些独特的操作,如更新状态和/或变量。

这里有一个我使用的AXIOS调用,在我的应用程序中我有类似的变化:

axios({
  method: "post",
  url: `/api/PlanetTime/Battle/${this.props.levelId}/files/upload`,
  data: bodyFormData,
  config: {
    headers: { "Content-Type": "multipart/form-data" }
  }
})
  .then(response => {
    let newFile = response.data[response.data.length - 1];
    this.props.onUploadEnd(response.data);
    this.setState({
      selectedFile: null,
      file: null
    });
  })
  .catch(response => {
    console.log("upload error!");
  });

有没有一种方法可以像这样调用AXIOS,但它更通用,这样我就可以接受不同的URL、数据等,并且仍然可以利用 然后 电话的一部分?

1 回复 | 直到 6 年前

Andrew Li 6 年前

axios axios.request

function createRequest(url, data) {
  return axios({
    // Set up axios instance config
  });
}

createRequest('â¦', { â¦ })
  .then(response => { â¦ })
  .catch(error => { â¦ });

推荐文章

Hadi Zouhbi · 如何将从axios获得的数据传递到使用node的后端。js(react&node.js)

2 年前

Fatt Sky · 返回axios get错误([[PromiseState]]:“拒绝”)

2 年前

Vodka · 如何将单个json对象转换为json数组?

2 年前

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

2 年前

Carlos Henrique R. Pereira · 我的API请求有效,但无法访问内容

2 年前

torrey pines · React在错误的API调用中不输出axios catch错误,而是获取JavaScript错误

2 年前

C9Tolan · React和Axios Post有效负载格式

2 年前

bami · 动态SSG页需要getStaticPaths,而地址缺少getStaticPaths

2 年前

kunosyn · 未使用“回调地狱”语法定义Javascript类属性

2 年前

sergioac · 如何在react js中使用带有自定义钩子的表单数据?

2 年前