Axios或Fetch：在2019年使用什么？

Axios是一个著名的JavaScript库。 这是用于浏览器和Node.js的基于Promise的HTTP客户端。 如果您过去几年一直是JavaScript程序员，那么您肯定会使用此库。 2019年10月，Axios软件包从npm上下载了2500万次。 看来Axios的未来是万里无云的。 但是，如果我告诉您Axios是一个失败的项目该怎么办。 这正是关于Reddit的讨论的内容。 即，我们正在谈论以下内容：

• Axios GitHub存储库的开发人员活动水平很低。
• 问题和PR被忽略。
• 开发团队保持沉默。

广泛讨论的脆弱性使局势更加恶化。 此漏洞于2017年报告。 该项目的作者忽略了她两年多了。

当Axios库变得流行时，浏览器没有实现基于Promise的HTTP客户端的API。 标准的XML HTTP请求（XHR）接口很不方便，很难使用。 开发人员很高兴接受Axios，因为该库使他们的生活更轻松。



Fetch API于2015年发布。 为什么我们在2019年仍在使用Axios？ 让我们比较这两种技术。

模板代码量

etch获取

fetch('https://jsonplaceholder.typicode.com/todos/1')   .then(response => response.json())   .then(json => console.log(json)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

xAxios

 axios.get("https://jsonplaceholder.typicode.com/todos/1")  .then(response => console.log("response", response.data)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

使用提取时，您必须处理两个承诺。 但是，当使用Axios时，我们可以通过响应对象的data属性直接访问JSON结果。

body mixin json()方法获取Response流并完整读取它。 它返回一个由解析请求的正文文本的JSON结果解析的promise。

处理POST请求时，您需要在Fetch中使用更多样板代码。

etch获取

 fetch("https://jsonplaceholder.typicode.com/posts", {  method: "POST",  body: JSON.stringify({    title: "Title of post",    body: "Post Body"  }) })  .then(res => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log(data))  .catch(error => console.log(error)); 

xAxios

 axios  .post("https://jsonplaceholder.typicode.com/posts", {    title: "Title of post",    body: "Body of post"  })  .then(response => console.log(response.data))  .catch(error => console.log(error)); 

使用Axios可以避免编写大量样板代码，并使代码更清晰。

错误处理

etch获取

 fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

xAxios

 axios  .get("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    console.log("response", response);  })  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

Axios库报告网络错误，但Fetch API不会。 使用提取时，您始终需要检查response.ok属性。 为了简化此问题的解决方案，可以将此错误作为单独的功能发出：

 const checkForError = response => {  if (!response.ok) throw Error(response.statusText);  return response.json(); }; fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(checkForError)  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); 

缺少功能

Axios可以监视数据上传的进度。 提取不支持此功能。 对于正在开发允许用户将照片或视频文件上传到服务器的应用程序的技术人员来说，这可能是选择技术的决定性因素。

 const config = {  onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config); 

替代库

这是Axios和Fetch API的几种替代方法：

• Ky是一个基于window.fetch的微型智能HTTP客户端。
• Superagent是一个基于XMLHttpRequest的小型渐进式HTTP客户端库。

总结

我应该在2019年使用什么？ 这取决于很多。 例如，如果您需要跟踪将资料上传到服务器的进度，则Axios或Superagent最适合您。 如果可以处理Fetch的限制，则最好使用此API。 并且为了稍微改善Fetch代码，请尝试使用像Ky这样的包装器库。

亲爱的读者们！ 您在项目中使用哪些HTTP客户端？