ajax与axios区别

最新推荐文章于 2024-09-22 18:14:12 发布

枕秋荷

最新推荐文章于 2024-09-22 18:14:12 发布

阅读量285

点赞数 1

CC 4.0 BY-SA版权

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/qq_41799870/article/details/106886247

本文从传统Ajax（XMLHttpRequest）讲起，探讨了JQuery对XHR的封装及其局限性，再到现代Promise实现的Axios库，对比了它们在异步请求处理上的优劣，突出了Axios的特性如Promise API、CSRF支持、并发请求接口等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax

传统 Ajax 指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持、

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

jquery封装ajax缺点`：

针对mvc编程，不适用现在的mvvm模式
为了jquery的封装ajax引入jquery十分不合理
基于原生的XHR开发，它的架构又不清晰
部分和关注分离原则
配置和调用方式混乱，而且基于事件的异步模型不友好

axios

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

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有如下特性

从浏览器中创建 XMLHttpRequest
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）
从 node.js 创建 http 请求
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据