Question

研究了axios和我发现的ES6 fetch的文档，两者都非常相似，并且经历了$ .ajax及其缩写的强大影响。

axios的主要优势是浏览器支持。

我是对的，如果我使用babel-polyfill - 没有理由使用axios吗？

Answer 1

使用Axios over Fetch的几个原因：

监控请求进度的能力

这是XMLHttpRequest（支持axios）或Fetch API之间的更多问题。

Fetch API目前没有提供任何方式来获取请求进度的通知，例如为大文件上传提供反馈机制的功能。

另一方面，Axios内置了这个功能：

axios.post('/api', data, {
    onUploadProgress: ({ total, loaded }) => {
        // update progress
    }),
})

错误处理

当您的后端返回500 Internal Server Error响应代码时，fetch将不会将其视为与200 OK不同。

在大多数情况下，这是一种不便，因为您先前对回复内容的所有假设都不再有效。

大多数情况下，当您收到服务器的错误响应时，您希望尽快中止处理管道，并切换到错误处理案例。

fetch(url)
    .then(reponse => {
        if (!(status >= 200 && status < 300)) {
            return Promise.reject(new Error("Invalid response status"));
        }

        return response;
    })
    .then(response => response.json())
    .then(/* normal processing */)
    .catch(/* error handling */);

这并不难实现，但是您可能希望在某些抽象下捕获此逻辑以避免重复，这使我们更接近Web API抽象，即Axios。

如果响应返回错误状态，Axios会做出理智并拒绝承诺。这种行为可以自定义，就像axios一样。

测试

Axios有moxios，fetch有fetch-mock。

这两个库都很棒，但根据我的经验，fetch-mock需要额外的设置才能让Jest使用模拟获取而不是polyfilled。

我也希望moxios.wait()返回一个在匹配请求后将解决的承诺。

Axios提供的其他功能

例如，您可以配置一个拦截器，它将api键添加到所有请求参数，或监视活动请求以显示加载屏幕。

使用一个选项而不是另一个选项的原因可能因实际要求而异。

如果您需要监控进度，请使用Axios（或XMLHttpRequest）。

如果您正在编写服务工作者，请使用Fetch。

否则，请使用对您更方便的内容。

Answer 2

Axios是一个NPM库，因此可以在Node.js和浏览器上运行。 fetch是一个Web API，不适用于Node。相反，Node.js具有http模块，并且没有Fetch API。它还简化了传递数据和处理不同类型的HTTP请求

是否有任何理由使用axios而不是ES6 fetch

2 个答案: