医声与元老们沟通交流后端实战经验!

当他们制出web应用领域时，他们一般来说采用Axios和Fetch等应用领域程序来继续执行互联网允诺。责任编辑将如是说皮厄县Axios和Fetch，以期在前述应用领域作出恰当的优先选择。

Axios和Fetch简述

Fetch API是两个提供更多了fetch()方式的用作推送互联网允诺的USB，它内放于当代应用领域程序中，因而无须加装。Axios是两个服务器端库，他们能透过cdn或包命令行安装采用它，Axios能在应用领域程序或node.js中运转。

加装axios

假如他们是在node.js自然环境下采用axios，他们能采用下列任何人一类方式加装axios：

透过NPM加装:npm install axios

透过Yarn加装:yarn add axios

接着在工程项目中导入：

;

假如是在应用领域程序中采用axios，他们能透过cdn导入：

Fetch 和 Axios间的较为

句法

选参数，两个配置选项的对象。因而，句法是：假如没有配置选项，允诺将默认为收到GET允诺：

fetch(url)

透过配置选项，他们能为允诺定义一些设置，包括：

    fetch(url, { 

: { 

    }, 

.stringify({}),

})

Axios句法类似，但有许多不同的调用方式：

axios(url, { 

})

他们还能像这样附加HTTP方式：

axios.get(url, {

})

与fetch方式一样，他们能忽略axios中的HTTP方式，默认get方式：

axios(url)

同样，他们能采用第二个参数为允诺定义一些自定义设置：

axios(url, { 

: {}, 

: {},

})

他们也能这样写：

axios({ 

, 

: url, 

: {}, 

: {}, 

})

处理JSON 数据

列表，并较为它间的差异。采用Fetch API，他们的代码如下所示：

; 

fetch(url)

 response.json()) 

.log);

控制台中的结果如下所示：

fetch()回到两个promise，在.then方式里面处理，此时，他们还没有获得所需要的json格式的数据，所以在response对象上调用.json()方式，这将回到另两个以json格式数据resolve的promise，所以fetch允诺包含两个promise。

但是，假如他们采用Axios继续执行相同的允诺，他们有下列代码：

;

axios.get(url)

.log(response.data));

对于Axios，响应数据默认为JSON。响应数据在response对象的data属性上。

他们能通过在配置项中指定responseType来覆盖默认的JSON数据类型，如下所示：

axios.get(url, { 

})

自动字符串化

当他们用post方式向apiUSB推送js对象时，Axios会自动字符串化数据，下列代码采用Axios继续执行post允诺：

; 

 } 

axios.post(url, {

: { 

,

        }

: todo

.log);

当他们采用axios收到post允诺时， 他们把允诺主体数据分配给data属性。他们还能设置Content-Type 。默认情况下，axios将Content-Type设置为application/json。让他们来看一下响应数据：

响应数据在response.data上：

假如他们采用Fetch API，他们必须采用JSON.stringify()手动字符串化对象,接着将其分配给允诺主体。

;

 }; 

    fetch(url, { 

, 

 }, 

.stringify(todo) 

    })

 response.json())

.log(data))

采用fetch时他们还必须显式地将Content-Type 设置为application/json。

错误处理

fetch和axios都回到了两个resolved或rejected的promise。当promise被rejected时，他们能采用.catch()来处理错误。与Fetch方式相比，采用axios处理错误的方式更加简洁。

; 

    axios.get(url) 

.log(response.data)) 

 { 

.log(err.message); 

    });

假如状态码超出2xx的范围，Axios的promise将被

 {

(err.response) {

 {

            status,

            config

        } = err.response;

) {

);

        }

) {

);

        }

(err.request) {

, err.message);

 {

, err.message);

    }

});

error对象有response属性时表示应用领域程序收到了状态码超出2xx范围的错误响应。error对象有request属性表示收到了允诺，但应用领域程序没有收到响应。否则，假如没有允诺或响应属性，则说明出现互联网错误。

;

fetch(url)

 {

 (!response.ok) {

(

            );

        }

 response.json();

    })

.log)

 {

.log(err.message);

    });

在响应块中，他们检查响应的ok状态是否为false，接着抛出两个在中处理的自定义错误。他们能看看响应对象上可用的方式，如下所示：

上面的屏幕截图是成功的fetch。在遇到错误的URL地址的情况下，ok和status属性将分别变为false和404，他们抛出两个错误，因而.catch() 子句将显示自定义错误消息。

响应超时/取消允诺

让他们看看这些HTTP应用领域程序如何处理HTTP允诺的响应超时。采用Axios，他们能在配置对象中添加超时属性，并以毫秒为单位指定允诺终止前的时间。在下面的代码片段中，他们的目标是，假如允诺超过四秒钟的时间，就终止允诺，接着在控制台中记录错误。

;

axios.get(url, {

    })

.log(response.data))

 {

.log(err.message);

    });

要采用Fetch取消允诺，他们能采用AbortControllerUSB。请参见下面的用法：

;

 AbortController();

 signal = controller.signal;

);

fetch(url, {

: signal

    })

 response.json())

.log)

 {

.error(err.message);

    });

他们从创建两个控制器对象开始，并获得了对signal对象和abort()方式的访问权。接着，他们透过配置选项将signal对象传递给fetch（）。这样，只要触发了abort方式，fetch允诺就会终止。他们能看到，在setTimeout函数的帮助下，假如服务器在四秒钟内没有响应，操作就会终止。

效率表现

由于Fetch和axios都是如前所述promise的，因而它不应该导致任何人性能问题。然而，他们仍然能采用measurethat.net来衡量他们的表现。他们得到下列结果：

如上所述，本机获取速度略快于axios。这是无关紧要的，因为两者都是异步的。

应用领域程序支持

Axios和Fetch在当代应用领域程序中得到广泛支持。对于像IE 11这样不支持ES6 promise的旧自然环境，对于Fetch，他们还需要添加两个polyfill来支持旧应用领域程序。

总结

他们讨论了Fetch和axios，并采用真实场景对它进行了前述较为。最后，你在工程项目中优先选择什么取决于你的个人喜好和易用性。

译自：https://meticulous.ai/blog/fetch-vs-axios/