理解 ajax、fetch和axios
背景
- ajax
- fetch、axios
优缺点
ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax
由于fetch是比较底层,需要我们再次封装,比如data参数配置
// jquery ajax
$.post(url, {name: 'test'})
// fetch
fetch(url, {
method: 'POST',
body: Object.keys({name: 'test'}).map((key) => {
return encodeURIComponent(key) + '=' + ncodeURIComponent(params[key]);
}).join('&')
})fetch不支持超时控制,即timeout
详解axios
axios是什么
基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
axios的特点
1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API支持 Promise API
4. 拦截请求和响应 (就是有interceptor,拦截器)
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 XSRF
拦截器原理
兼容性
火狐 谷歌 ie Edge safari ✔ ✔ ✔ ✔ ✔ ✔ ✔ 安装
npm install axios
用法
//执行get请求
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
}); // Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
使用流程
//首先创建一个Axios实例
var axiosIns = axios.create({
baseURL: '请求地址',
timeout: 延时时长,
headers: {'X-product': 'h5'}
})
//设置request拦截器
axiosIns.interceptors.request.use(request=>{
//处理request,可以对所有请求统一处理请求头等
})
//response拦截器
axiosIns.interceptors.response.use(response=>{
//处理response,可以对所有响应做处理
}) //实例方法
axios#request(config)
axios#get(url[,config])
axios#delete(url[,config])
axios#head(url[,config])
axios#post(url[,data[,config]])
axios#put(url[,data[,config]])
axios#patch(url[,data[,config]]) //请求配置
{
baseURL: 'https://www.tomandjerry.club/api/',
url: '/user',
method: 'get',
//transformRequest 允许在向服务器发送前,修改请求数据,
//只能用在PUT POST PATCH 这几个请求方法中,
//后面的数组中的函数必须返回一个字符串,或ArrayBuffer,或Stream
transformRequst: [function(data){
//对data进行任意转换处理
return data;
}],
//transformResponse 在传递给then/catch 前,允许修改响应数据
transformResponse: [function(data){
//对data进行任意转换处理
}],
//自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
//params 必须是一个 无格式对象 或 URLSearchParams对象
params: {
ID: 1234
},
//paramsSerializer 是负责params序列化的函数
//什么是序列化和反序列化,见下
paramsSerializer: function(params){
return Qs.strinfify(params,{arrayFormat: 'brackets'})
},
//data 主体的发送数据
//只适用于PUT POST 和PATCH
//在没有设置transformRequest时,必须是以下类型之一
//string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
//浏览器专属:FomData,File,Blob
//Node专属:Stream
data: {
firstName: 'Jack'
},
//timeout 请求超时,如果请求超过了timeout指定的时间则请求将被中断
timeout: 1000,
//表示跨域请求时是否需要使用凭证
withCredentials: false,//默认的
//adapter 允许自定义处理请求,使测试更轻松
//返回 一个promise并应用一个有效的响应
adapter: function(config){ },
//auth 表示应该使用HTTP基础验证,并提供凭据
//将设置一个Authorization头,覆写掉现有的任意使用headers设置的自定义Authorization头
auth: {
username: 'janedoe',
password: 'ssss'
},
//responseType 表示服务器响应的数据类型,
//可以是arraybuffer blob document json text stream
responseType: 'json',//默认
//xsrfCookieName 是用作xsrf token 的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN',//默认
//xsrfHeaderName 是承载xsrf token 的值的HTTP头的名称
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认
//onUploadProgress 允许为上传处理进度事件
onUploadProgress: function(progressEvent){
// 对原生进度事件的处理
},
//onDownloadProgress 允许为下载处理进度事件
onDownloadProgress: function(progressEvent){
//对原生进度事件的处理
},
//maxContentLength 定义允许的响应内容的最大尺寸
maxContentLength: 2000,
//validateStatus 定义对于给定的HTTP 响应状态码是 resolve 或 reject
//如果validateStatus返回true(或者设置为 `null` 或 `undefined`),
//promise 将被 resolve; 否则,promise 将被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认
},
//maxRedirects 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0,将不会 follow 任何重定向
maxRedirects: 5, // 默认的
//httpAgent和httpsAgent分别在node.js中用于定义在执行http和https 时使用的自定义代理。
//允许像这样配置选项:keepAlive默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
//proxy定义代理服务器的主机名称和端口,auth表示HTTP基础验证应当用于连接代理,并提供凭据
//这将会设置一个Proxy-Authorization头,
//覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
//cancelToken 指定用于取消请求的 cancel token
cancelToken: new CancelToken(function (cancel) { })
}
序列化
解释
在程序运行的过程中,所有变量都是存在内存中
d = dict(name='Bob', age=20, score=88)
可以随时修改变量,比如把name改成'Bill',但是一旦程序结束,所有变量所占用的内存就会被操作系统回收,下次重新运行变量又被重新初始化为'Bob',我们把变量从内存中变成可储存或传输的过程称之为序列化。在Python中叫pickling,在其他语言中也被称之为serialization,marshalling,flattening等等。序列化之后,就可以把序列化后的内容写入磁盘,或者通过网络传输到别的机器上。反之把变量内容从序列化的对象重新读到内存里称之为反序列化,即unpickling。
参考
https://www.jianshu.com/p/065294e2711c
https://github.com/axios/axios
理解 ajax、fetch和axios的更多相关文章
- react中使用Ajax请求(axios,Fetch)
React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...
- 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较
一.ajax.fetch 和 axios 简介 1.1.ajax ajax是最早出现发送后端请求的技术,属于原生 js .ajax使用源码,请点击<原生 ajax 请求详解>查看.一般使用 ...
- 真正理解 git fetch, git pull 以及 FETCH_HEAD【转】
转自:http://www.cnblogs.com/ToDoToTry/p/4095626.html 真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必 ...
- 通过回调函数的理解来进一步理解ajax及其注意的用法
一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...
- JavaScript大杂烩12 - 理解Ajax
AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下 ...
- 深入理解ajax系列第八篇——表单提交
前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...
- 真正理解 git fetch, git pull 以及 FETCH_HEAD
真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必须要附加讲清楚git remote,git merge .远程repo, branch . commi ...
- 深入理解ajax系列第八篇
前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...
- 真正理解 git fetch, git pull 以及 FETCH_HEAD(转)
转自http://www.cnblogs.com/ToDoToTry/p/4095626.html 真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必须 ...
随机推荐
- TMG阵列部署选择
如果用户环境中有多个网络出口,用EMS配置TMG是最佳选择.在这种情况下,可以使用EMS管理的阵列配置企业级访问规则.由于一个单一的策略适用于整个企业的所有阵列,因此管理成本将大大降低.用于EMS的服 ...
- python笔记7-多线程threading之函数式
前言 1.python环境3.62.threading模块系统自带 单线程 1.平常写的代码都是按顺序挨个执行的,就好比吃火锅和哼小曲这两个行为事件,定义成两个函数,执行的时候,是先吃火锅再哼小曲,这 ...
- Linux中如何安装loadgenerator
/* 1. 到官方网站到HP官网下载Load Generator 安装文件 _Load_Generator_11.00_T7330-15010.iso或者其它网站下载loadrunner-11-loa ...
- Office 365实现单点登录系列(1)—域环境搭建
Hello 小伙伴们, 2018新年快乐,作为2018年首篇文章,怎么能不给大家带来点干货呢?这篇文章其实我9月底的时候已经在MSDN上发布过了,为表诚意,我更新了这篇文章,并把它组成了一个系列,2. ...
- python 脚本运行时报错: AttributeError: 'module' object has no attribute ***
最近在编写Python脚本过程中遇到一个问题比较奇怪:Python脚本完全正常没问题,但执行总报错"AttributeError: 'module' object has no attrib ...
- S/4HANA生产订单增强WORKORDER_UPDATE方法BEFORE_UPDATE参数分析
题目这个增强的输入参数很恐怖,长长的一串: CALL BADI l_badi->BEFORE_UPDATE EXPORTING IT_PIINSTRUCTIONVALUE = IT_PIINST ...
- 4、Node.js REPL(交互式解释器)
Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并 ...
- sys,os加glob加os.path用法
1 sys.path是python的搜索模块的路径集,是一个list 打印下大概长这样 C:\Python27\Lib\idlelib C:\Windows\system32\python27.z ...
- 利用JDK自带工具keyTool生成安全证书
前言:说一下最近做的工作,主要利用iText给网页中生成好的html报表转化为pdf格式的文件,并且在其中加入水印,数字签名等等,这部分主要介绍安全证书的目的就是为了做数字签名部分用的. 下面利用jd ...
- PAT——1046. 划拳
划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就赢了,输家罚一杯酒.两人同赢或两人同输 ...