背景
  • 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

https://juejin.im/post/5acde23c5188255cb32e7e76

https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143192607210600a668b5112e4a979dd20e4661cc9c97000

理解 ajax、fetch和axios的更多相关文章

  1. react中使用Ajax请求(axios,Fetch)

    React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...

  2. 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

    一.ajax.fetch 和 axios 简介 1.1.ajax ajax是最早出现发送后端请求的技术,属于原生 js .ajax使用源码,请点击<原生 ajax 请求详解>查看.一般使用 ...

  3. 真正理解 git fetch, git pull 以及 FETCH_HEAD【转】

    转自:http://www.cnblogs.com/ToDoToTry/p/4095626.html 真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必 ...

  4. 通过回调函数的理解来进一步理解ajax及其注意的用法

    一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...

  5. JavaScript大杂烩12 - 理解Ajax

    AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下 ...

  6. 深入理解ajax系列第八篇——表单提交

    前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...

  7. 真正理解 git fetch, git pull 以及 FETCH_HEAD

    真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必须要附加讲清楚git remote,git merge .远程repo, branch . commi ...

  8. 深入理解ajax系列第八篇

    前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...

  9. 真正理解 git fetch, git pull 以及 FETCH_HEAD(转)

    转自http://www.cnblogs.com/ToDoToTry/p/4095626.html 真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必须 ...

随机推荐

  1. TMG阵列部署选择

    如果用户环境中有多个网络出口,用EMS配置TMG是最佳选择.在这种情况下,可以使用EMS管理的阵列配置企业级访问规则.由于一个单一的策略适用于整个企业的所有阵列,因此管理成本将大大降低.用于EMS的服 ...

  2. python笔记7-多线程threading之函数式

    前言 1.python环境3.62.threading模块系统自带 单线程 1.平常写的代码都是按顺序挨个执行的,就好比吃火锅和哼小曲这两个行为事件,定义成两个函数,执行的时候,是先吃火锅再哼小曲,这 ...

  3. Linux中如何安装loadgenerator

    /* 1. 到官方网站到HP官网下载Load Generator 安装文件 _Load_Generator_11.00_T7330-15010.iso或者其它网站下载loadrunner-11-loa ...

  4. Office 365实现单点登录系列(1)—域环境搭建

    Hello 小伙伴们, 2018新年快乐,作为2018年首篇文章,怎么能不给大家带来点干货呢?这篇文章其实我9月底的时候已经在MSDN上发布过了,为表诚意,我更新了这篇文章,并把它组成了一个系列,2. ...

  5. python 脚本运行时报错: AttributeError: 'module' object has no attribute ***

    最近在编写Python脚本过程中遇到一个问题比较奇怪:Python脚本完全正常没问题,但执行总报错"AttributeError: 'module' object has no attrib ...

  6. S/4HANA生产订单增强WORKORDER_UPDATE方法BEFORE_UPDATE参数分析

    题目这个增强的输入参数很恐怖,长长的一串: CALL BADI l_badi->BEFORE_UPDATE EXPORTING IT_PIINSTRUCTIONVALUE = IT_PIINST ...

  7. 4、Node.js REPL(交互式解释器)

    Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并 ...

  8. sys,os加glob加os.path用法

    1   sys.path是python的搜索模块的路径集,是一个list 打印下大概长这样 C:\Python27\Lib\idlelib C:\Windows\system32\python27.z ...

  9. 利用JDK自带工具keyTool生成安全证书

    前言:说一下最近做的工作,主要利用iText给网页中生成好的html报表转化为pdf格式的文件,并且在其中加入水印,数字签名等等,这部分主要介绍安全证书的目的就是为了做数字签名部分用的. 下面利用jd ...

  10. PAT——1046. 划拳

    划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就赢了,输家罚一杯酒.两人同赢或两人同输 ...