ajax

最初ajax使用的是xml，现在使用的格式是json

缺点

1.存在跨域 
2.seo不友好 
3.不能回退

请求报文

行： GET（请求方式） /是？ieutf-(请求url) Http(协议版本) 
头： host/cookie/Content-type.... 空行 
体 username=admin&password=admin

响应报文

行：HTTP/1.1 200 OK 
头：Content-TyPE Content-length Content-encoding:gzip 空行 
体：html

创建流程

1.创建对象 const xhr=new XMLHttpRequest(); 
2.初始化，设置请求方法和url xhr.open('GET','[HTTP://1.7.0.0:8000/SERVER]()') 
3.设置请求头 xhr.setRequestHeader('Content-Type','appliocation/x-www.form-urlencoded') 
3.设置响应类型 xhr.responseType='json' 
3.发送 xhr.send(‘传递参数’); 
4.事件绑定 处理服务器返回的结果 on when 当。。。。的时候 
readyState 是xhr对象中的属性 表示状态0还未发送 1创建对象 2open了 3发送了部分返回 4全部返回 xhr.onreadystatechange=function(){ 
//会触发5次 
if(xhr.readyState===4){ 
//xhr.status 状态吗 
//xhr.statusText 状态字符串 
//xhr.getAllResponseHeaders() //所有响应头 
//xhr.response 返回头 
} }
//处理ie缓存问题：
xhr.open('GET','<http://127.0.0.0:8000/ie?t=>'+Date.now())
//延时处理
xhr.timeout=2000;

fetch

Fetch偏底层，浏览器提供的api

Fetch优势

1.fetch比XMLHttpRequest语法简洁， 
2.是自带promise实现，实现异步不需要再次new Promise 
3.比XMLHttpRequest更加底层，所以提供的api更多 
4.脱离了XHR，语法更加符合Es6

Fetch缺点：

1.偏原生，需要进行二次封装，对网络请求400，500都不报错 
2.默认不会自动带cookie，axios会自动带，fetch需要添加配置 fetch(url,{credentials:'include'}) 
3.fetch一旦请求就不能阻止请求，aixos可以中断请求 
4.不支持监听进度

前端标准组织：W3C和Whatwg

fetch是whatwg制定的，whatwg是苹果、谷歌、微软、mezilla四个组织制定的，有制约w3c的趋势

axios

axios是二次封装的框架

1.底层是XMLHttpRequest,
2.支持promise api 
3.支持防止CSRF 
4.提供了一些并发请求的接口 类似promise.all 
5.从node。js创建http请求 
6.可以拦截和相应，响应数据 
7.可以取消请求
8.自动转换JSON数据

axios中断请求

1.CancelToken.souce 工厂方法创建一个 cancel token
const CancelToken = axios.CancelToken; 
const source = CancelToken.source();
axios.get('<https://mdn.github.io/dom-examples/abort-api/sintel.mp4>', { 
cancelToken: source.token }).catch(function (thrown) { 
// 判断请求是否已中止 
if (axios.isCancel(thrown)) { 
// 参数 thrown 是自定义的信息 
console.log('Request canceled', thrown.message); 
} else { 
// 处理错误 
} });
// 取消请求（message 参数是可选的） 
source.cancel('Operation canceled by the user.');
axios 为我们提供了一个 isCancel() 方法，用于判断请求的中止状态
2.通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token
const CancelToken = axios.CancelToken; let cancel;
axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { 
// executor 函数接收一个 cancel 函数作为参数 cancel = c; 
}) });
// 取消请求 
cancel('Operation canceled by the user.');
3.umi-request 中断请求
dva中使用CancelToken中止请求
import request from '@/utils/request'; 
const CancelToken = request.CancelToken; 
let cancel: any;
// 合同文件上传 OSS
export async function uploadContractFileToOSS(postBody: Blob): Promise<any> { 
return request(`/fms/ossUpload/financial_sys/contractFile`, 
{ method: "POST", data: postBody, requestType: 'form', 
// 传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token 
cancelToken: new CancelToken((c) => { cancel = c }) }) }
// 取消合同文件上传 export async function cancelUploadFile() { return cancel && cancel() }

Ajax fetch axios

ajax

fetch

axios