ajax-axios-fetch区别

最新推荐文章于 2024-09-10 08:45:09 发布

升级中的橙哥

最新推荐文章于 2024-09-10 08:45:09 发布

阅读量349

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/syc1999999/article/details/123339379

版权

本文介绍了前端异步请求的三种常见技术：Ajax、Axios和Fetch。Ajax是最早的异步请求方式，但存在回调地狱的问题。Axios基于Promise，解决了回调地狱，提供了并发请求、请求拦截等功能。Fetch作为原生JS方法，不使用XMLHttpRequest，但存在一些不足，如默认不携带cookie，不支持超时控制等。综合来看，Axios因其便利性和广泛适用性成为当前最佳选择。

摘要由CSDN通过智能技术生成

首先请允许画个最简略的前后端交互流程图。

1： Ajax

指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，属于原生js，核心使用XMLHttpRequest对象，以下是使用jquery封装的代码。

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

大眼一瞪似乎代码简洁很好用，但还有个小问题，因为请求数据是异步的（其实ajax也可以是同步的），异步之间并没有前后顺序，哪个请求快就快一一点返回，假设有这么一个场景，后面请求的数据依赖前面的数据就只能在回调函数里面去嵌套了，也就是说的回调地狱。为了解决这个问题就出现了axios。

2：axios

是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本。

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

axios还有一下几个优点：

1.提供了一些并发请求的接口（重要，方便了很多的操作）

2.拦截请求和响应

3.转换请求和响应数据

4.取消请求

5.自动转换JSON数据

告诉你个秘密：最新的解决异步的使用async await

3:fetch

fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

fetch缺点：

fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
fetch没有办法原生监测请求的进度，而XHR可以

总结一下：现在最好用的还是axios，但是会有些安全性问题，预知详情自行百度。