jquery ajax
jq 的ajax是对原生XHR的封装，除此以外还增添了对JSONP的支持。用起来非常方便
用法：
$.ajax({ url:发送请求的地址, data:数据的拼接,//发送到服务器的数据 type:‘get‘,//请求方式，默认get请求 dataType:‘json‘,//服务器返回的数据类型 async:true,//是否异步，默认true cache:false,//设置为 false 将不会从浏览器缓存中加载请求信息 success:function(){},//请求成功后的回调函数（这个函数会得到一个参数：从服务器返回的数据） error: function(){}//请求失败时调用此函数 })
优缺点：
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
- 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
- JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
- 配置和调用方式非常混乱，而且基于事件的异步模型不友好
fetch
原生提供的ajax请求的一种方式，用于获取资源
由于Fetch API是基于Promise设计，旧浏览器不支持Promise，需要使用pollyfill es6-promise
fetch的优势：
- 语义简洁，更加语义化
- 更加底层，提供的API丰富（request, response）
- 脱离了XHR，是ES规范里新的实现方式
- 基于promise实现，支持async/await
用法：
get方式
fetch(‘/users?‘+new URLSearchParams(obj).toString()) .then(d=>d.json()) .then(d=>{ console.log(d); })
post方式
fetch(‘/users‘,{ method:‘post‘, headers:{‘Content-Type‘:‘application/x-www-form-urlencoded‘},//设置头信息 body:new URLSearchParams(obj).toString()//将对象变为url地址上的查询信息 }) .then(d=>d.json()) .then(d=>{ console.log(d); })
axios
用法：
get方式
axios.get(‘/get?user=xiaohuang‘) .then(e=>{ //进了then就会成功，否则会进catch console.log(e); }) .catch(e=>{ //报错内容 })
post方式
axios({ method: ‘post‘, url: ‘/user/12345‘, data: { firstName: ‘Fred‘, lastName: ‘Flintstone‘ } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); })
特性：
- 从 node.js 创建 http 请求
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口
- 自动转换JSON数据
栗子：
get请求成功之后 再请求post 然后 两个条件都成立 才执行结果
axios.get(‘/get?user=xiaoming‘) .then(e=>{ if(e.data.code == 0){ //这里的目的是为了进下一次的then return axios.post(‘/post‘,{ user:‘xiaohong‘ }) else{ //这里目的是为了进下一次的catch throw ‘失败‘; } } }) .then(e=>{ if(e.data.code == 0){ console.log(‘芝麻开门‘); }else{ throw ‘开门‘; } }) .catch(e=>{ console.log(e); })
axios.all
同时执行多个请求，all里面必须两个请求都成立才返回成功（只要一个请求失败，整体都会失败）
let arr = [get(),post()]; axios.all(arr) .then( axios.spread(function (a, b) { console.log(1); if(a.data.code == 0 && b.data.code == 0){ console.log(‘变身‘); }else{ console.log(‘再等一万年‘); } })).catch(e=>{ console.log(‘错误‘); })