浅谈 Axios 和 Fetch 的区别

1.简单区分

 

 

 

2.请求方式

axios传一个对象，里面包含请求url和请求方法，参数。 fetch传两个参数，第一个是请求url，第二个是请求的一些参数。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

// axios请求： const options = {   url: "http://yuque.com/",   method: "POST",   headers: {     Accept: "application/json",     "Content-Type": "application/json;charset=UTF-8",   },   data: {     yuque：'123'   }, };    axios(options).then((response) => {   console.log(response.status); });       // fetch请求示例：    const url = "http://yuque.com/"; const options = {   method: "POST",   headers: {     Accept: "application/json",     "Content-Type": "application/json;charset=UTF-8",   },   body: JSON.stringify({     yuque：'123'   }), };    fetch(url, options).then((response) => {   console.log(response.status); });

3.同时请求

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// axios axios.all([     axios.get("http://yuque.com/one"),     axios.get("http://yuque.com/two"),   ])   .then(     axios.spread((obj1, obj2) => {       ...     })   );   // fetch Promise.all([   fetch("http://yuque.com/one"),   fetch("http://yuque.com/two"), ])   .then(async ([res1, res2]) => {     const a = await res1.json();     const b = await res2.json();   })   .catch((error) => {     console.log(error);   });

4.请求的数据

在 axios 中，它是自动完成的，所以只需在请求中传递数据或从响应中获取数据。它是自动字符串化的，所以不需要其他操作。 在使用 fetch的时候，需要对响应数据使用某种方法，在发送带有请求的body时，需要对数据进行字符串化。 如下示例axios 没有额外的一行代码，在 fetch中，必须将数据转换为JSON格式。在一个较大的项目中，如果创建了大量的调用，那么可以使用 axios 来避免重复代码。

?

1 2 3 4 5 6 7 8 9

// axios axios.get('url')   .then((response) => console.log(response))   .catch((error) => console.log(error)) // fetch fetch('url')   .then((response) => response.json())   .then((data) => console.log(data))   .catch((error) => console.log(error))

5.响应的使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

// axios axios({     url: 'http://yuque.com/',     methods: 'POST',     timeout: 4000,     headers: {         Accept: "application/json",         'Content-Type': 'application/json;charset=UTF-8',     },     data: {         yuque：'123'     } }) .then((response) => {     /* 处理响应 */ }) .catch((error) => console.log('请求超时'));   // fetch提供的属性AbortController const controller = new AbortController(); const options = {     method: 'POST',     signal: controller.signal,     body: JSON.stringfy({         yuque：'123'     }), }; const promise = fetch('http://yuque.com/',options); const timeout = setTimeout(() => controller.abort(),4000); promise .then((response) => {     /* 处理响应*/ }) .catch((error) => console.log('请求超时'));

6.拦截的使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// axios axios.interceptors.request.use((config) => {     // 在请求之前对请求参数进行处理     return config; }); axios.get("http://yuque.com/") .then((response) => { console.log(response.data); });   // fetch fetch = ((originalFetch) => {   return (...arguments) => {     const result = originalFetch.apply(this, arguments);     return result.then(console.log("请求已发送"));   }; })(fetch); fetch("http:http://yuque.com/")   .then((response) => response.json())   .then((data) => {     console.log(data);   });

7.错误的处理

axios处理错误是非常容易的。如果出现像404这样的错误响应，promise就会被拒绝并返回一个错误，所以需要捕获一个错误，可以检查它是什么类型的错误。当响应良好时，接口返回了数据，但是如果请求以任何方式失败，使用axios就能够检查 .catch() 部分中的错误类型并返回正确的消息。 使用fetch，相对来说就较复杂了。每次从 fetch中得到响应时，需要检查状态是否成功，因为即使不是，也会得到响应。在 fetch的情况下，只有当请求没有完成时，promise才会被解决。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// axios axios.get('url')   .then((response) => console.log(response))   .catch((error) => {     if (error.response) {       console.log(error.response.data)       console.log(error.response.status)       console.log(error.response.headers)     } else if (error.request) {       console.log(error.request)     } else {       console.log(error.message)     }   }) // fetch fetch('url')   .then((response) => {     if (!response.ok) {       throw Error(response.statusText);     }     return response.json()   })   .then((data) => console.log(data))   .catch((error) => console.log(error))

总结：

通过比较可以看出，对于较大型项目有大量http请求，需要良好的错误处理或http拦截的应用，Axios是一个更好的解决方案。在小型项目的情况下，只需要少量API调用，Fetch也是一个不错的解决方案。大多数浏览器和Node.js环境都支持Axios，而现在浏览器仅支持Fetch，所以使用H5或PC的项目使用Axios相对较好，使用App内嵌H5项目，依赖App壳子中的浏览器，尽量减少Fetch的使用，以达到最好的兼容性。