- ajax： 【优点：局部更新；原生支持】 【缺点：可能破坏浏览器后退功能；嵌套回调】 - jqueryAjax： 【在原生的ajax的基础上进行了封装；支持jsonp】 - fetch： 【优点：解决回调地狱】 【缺点：API 偏底层，需要封装;默认不带Cookie，需要手动添加; 浏览器支持情况不是很友好，需要第三方的ployfill】 - axios：【几乎完美】 支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动转换JSON数据 浏览器端支持防止CSRF(跨站请求伪造) --------------------------------------------------------------------------------------------------------------------------------- <div id="div1"><h3> <font color=red > Ajax、fetch、axios的区别与优缺点 </font><h3></div> [参考博客](https://www.jianshu.com/p/d771bbc61dab) ## 原生ajax onreadystatechange事件机制来捕获请求的状态； readyState状态： 0: 请求未初始化；1: 服务器连接已建立；2: 请求已接收 3: 请求处理中；4: 请求已完成，且响应已就绪 ```javascript //创建异步对象 var xhr = new XMLHttpRequest(); //设置请求基本信息，并加上请求头 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.open('post', 'test.php' ); //发送请求 xhr.send('name=Lan&age=18'); xhr.onreadystatechange = function () { // 这步为判断服务器是否正确响应 if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; ``` ## jqueryAjax ```javascript var loginBtn = document.getElementsByTagName("button")[0]; loginBtn.onclick = function(){ ajax({ type:"post", url:"test.php", data:"name=lan&pwd=123456", success:function(data){ console.log(data); } }); } ``` ## fetch ```javascript fetch('http://www.mozotech.cn/bangbang/index/user/login', { method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams([ ["username", "Lan"],["password", "123456"] ]).toString() }) .then(res => { console.log(res); return res.text();}) .then(data => { console.log(data);}) ``` ## axios ```javascript axios({ method: 'post', url: '/abc/login', data: { userName: 'Lan', password: '123' } }) .then(function (response) { console.log(response);}) .catch(function (error) { console.log(error);}); ``` --------------------------------------------------------------------------------------------------------------------------------- <div id="div1"><h3> <font color=red > 同时发送两个请求 </font><h3></div> 使用axios.all, 可以放入多个请求的数组. axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2 ```javascript function getUserAccount(){ return axios.get('/user/12345'); } function getUserPermissions(){ return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(),getUserPermissions()]) .then(axios.spread(function(acct,perms){ //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果 })) ``` --------------------------------------------------------------------------------------------------------------------------------- <div id="div1"><h3> <font color=red > promise axios封装 </font><h3></div> ```javascript import axios from 'axios' export function request(options) { return new Promise((resolve, reject) => { // 1.创建axios的实例对象 const instance = axios.create({ baseURL: 'http://123.207.32.32:8000', timeout: 5000 }) // 过滤器(拦截器) instance.interceptors.response.use(res => { return res.data }) // 通过实例发送网络请求 instance(options) .then(res => { resolve(res) }) .catch(err => { reject(err) }) }) ``` --------------------------------------------------------------------------------------------------------------------------------- <div id="div1"><h3> <font color=red > 将axios异步请求同步化处理 </font><h3></div> ```javascript //使用 asyns/await async getHistoryData (data) { try { let res = await axios.get('/api/survey/list/', { params: data}) this.tableData = res.data.result this.totalData = res.data.count } catch (err) { console.log(err) ; alert('请求出错！' } } ``` --------------------------------------------------------------------------------------------------------------------------------- <div id="div1"><h3> <font color=red > axios拦截器的使用 </font><h3></div> 拦截器分为request请求拦截器和response响应拦截器 request请求拦截器：发送请求前统一处理，如：设置请求头headers、应用的版本号、终端类型等。 response响应拦截器：有时候我们要根据响应的状态码来进行下一步操作，例如：由于当前的token过期，接口返回401未授权，那我们就要进行重新登录的操作。 ```javascript // http request 请求拦截器 : 发送请求之前判断是否存在token，除了登录页，其他页面请求头headers都添加token axios.interceptors.request.use(config => { // 在发送请求之前做些什么 let pathname = location.pathname; if(localStorage.getItem('token')){ if(pathname != '/' && pathname != '/login'){ config.headers.common['token'] = localStorage.getItem('token'); } } return config; }, error => { return Promise.reject(error);}); --------------------------------------------------------------------------------- // http response 响应拦截器 : 若返回401，页面跳转到登录页面 axios.interceptors.response.use(response => { return response; },error => { if (error.response) { switch (error.response.status) { case 401: // 返回401，清除token信息并跳转到登录页面 localStorage.removeItem('token'); router.replace({ path: '/login' // query: {redirect: router.currentRoute.fullPath} //登录成功后跳入浏览的当前页面 }) } return Promise.reject(error.response.data); // 返回接口返回的错误信息 } }); ```