axios和ajax怎么读,axios, ajax和fetch的比较
Ajax
前端程序员常说的Ajax是 Asynchronous JavaScript and XML的缩写,意思是异步网络请求。区别于传统web开发中采用的同步方式。
Ajax带来的最大影响就是页面可以无刷新的请求数据。以往,页面表单提交数据,在用户点击完”submit“按钮后,页面会强制刷新一下,体验十分不友好。
传统web请求方式:
使用Ajax后请求:
实现一个Ajax请求
在现代浏览器上实现一个Ajax请求是非常容易的,
var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象
//ajax是异步的,设置回调函数
request.onreadystatechange = function (){ // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应状态码
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('GET', '/api/categories');
request.setRequestHeader("Content-Type", "application/json") //设置请求头
request.send();//到这一步,请求才正式发出
使用原生的js还是比较繁琐,实际工程中建议使用jQuery之类的库,封装的ajax请求方法非常好用,且解决了浏览器兼容性的问题。
axios
首先需要知道:axios不是一种新的技术。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,有以下特点:
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
浏览器支持
axios面向现代浏览器设计,所以古老的浏览器并不支持。
因为axios设计简洁,API简单,支持浏览器和node,所以大受欢迎。它能很好的与各种前端框架整合。
fetch
fetch是前端发展的一种新技术产物。
以下内容摘自mozilla:
Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展。
在使用fetch的时候需要注意:
当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。
默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。
一个使用fetch获取数据的例子
fetch('http://example.com/movies.json')
.then(function(response){
return response.json();
})
.then(function(myJson){
console.log(myJson);
});
fetch代表着更先进的技术方向,但是目前兼容性不是很好,在项目中使用的时候得慎重。
axios和ajax怎么读,axios, ajax和fetch的比较相关推荐
- vue2.0中Ajax库(axios)
差点断更,最近换了新公司,新项目用的vue1,花了4天时间升级了大部分页面到vue2; 在main.js中导入axios,并在vue的原型上添加该实例: import axios from 'axio ...
- axios vue 回调函数_vue中ajax请求与axios包完美处理
这次给大家带来vue中ajax请求与axios包完美处理,vue中ajax请求与axios包处理的注意事项有哪些,下面就是实战案例,一起来看一下. 在vue中,经常会用到数据请求,常用的有:vue-r ...
- 原生 Ajax 封装 和 Axios 二次 封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
- Ajax是什么?Ajax高级用法之Axios技术
Ajax AJAX 异步请求局部刷新 Ajax 参数详解 js.json.jsonp区别 json和jsonp的区别 同源策略 json和js对象的区别 Ajax高级用法(axios) 为什么要用Ax ...
- ios ajax报错404,ajax 报错 axios正确
ajax 报错 axios正确 [2021-01-28 03:39:02] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(" ...
- axios vue 回调函数_vue中的ajax请求和axios包详解
在vue中,经常会用到数据请求,常用的有:vue-resourse.axios 首先,引入axios CDN: npm: npm install axios 并在全局的js中引入:import axi ...
- axios访问后台404_使用 axios 后台无法接收到数据的解决方案
如果想看排错思路的,可以看完踩坑经历,想直接要结果的,可以直接看解决方案. 踩坑经历 最近我在使用 SSM + Vue 做自己的小项目.Dao层 和 Service层 之类的代码已经写好了,就差 Co ...
- vue中ajax同步_Vue处理ajax请求
Ajax请求 1>解决跨域问题 1.1前端解决.只需要在vue.config.js中增加devServer节点增加代理: const path = require("path" ...
- SharePoint 2010中的客户端AJAX应用——ASP.NET AJAX模板
WCF Data Services是SharePoint 2010中一个极具吸引力的新特性.然而,因为它的强大,直接对其进行编程仍然会有点痛苦.幸运的是,一个新的相关技术 -- ASP.Net AJA ...
- ajax方法怎么用,ajax的使用方法
后台在写代码时 一般都会用到AJAX传值的方法 了解的AJAX方法有三种样式 第一 $.ajax( { type: "POST", url: "UserList.ashx ...
最新文章
- 微信小游戏「跳一跳」技术手段高分秘籍实现
- CV之FR:计算机视觉之人脸识别(Face Recognition)方向的简介、代码实现、案例应用之详细攻略
- 1.11 对象的销毁
- machine learning (5)---learning rate
- Python学习笔记:线程和进程(合),分布式进程
- mysql int(3)与int(11)的区别详解
- Git工作流指南:集中式工作流
- [SHOI2011]双倍回文 manacher
- spring mvc对异步请求的处理
- 如何root安卓手机_如何从我的字体里面提取TTF并阉割成未Root安卓手机能用的?...
- AJAX通过HTML请求C#一般处理程序
- linux_grep操作
- ArcGIS导出辖区边界点坐标
- cisco链路聚合配置
- 材料学和计算机哪个专业好,材料类专业包括哪些专业
- 双参数cfar c语言代码,一种多目标环境下的SAR图像双参数CFAR检测方法与流程
- (rec)机器人中的语音讲话TTS引擎
- springboot集成jooq异常集合
- 《人机交互技术》第四章 人机交互技术概述
- Ceph RBD 接口和工具 [Ceph RBD API and Tools]