AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装

}

)

}

})

//导出

export default ajax;

调用点方法

function getUser(){

return ajax.get(‘URL’)

}

ajax串行

getUser().then(res=>{

return getpost()

})

异步中的同步

async await

async 定义异步函数

await 那些操作异步执行

(

async function(){

let result =await getUser();

result=await getpost();

result=await getput();

}

)();

基于axios二次封装

//引入axios

import axios form ‘axios’;

//引入qs

import qs form ‘qs’;

//设置请求接口前缀

axios.defaults.baseURL=‘http://127.0.0.1:8000’;

//设置传给服务器设置统一格式

axios.defaults.headers[‘Content-Type’]=‘application/x-www-form-urlencoded’;

//通过qs转换成json字符串格式传给服务器

axios.defaults.transformRequest=data=>qs.stringify(data);

//设置超时时间

axios.defaults.timeout=0;

//在跨域请求时，会携带用户凭证

//前端配置了withCredentials=true，后段设置Access-Control-Allow-Origin不能为 " * ",必须是你的源地址

axios.defaults.withCredentials=true;

//请求拦截器

axios.interceptors.request.use(config=>{

//登录成功后，把从服务器获取的token信息存储到本地，以后在发请求，直接把token带上(自定义请求携带),服务器拿到token进行令牌效验，查看请求是否合法

let token =localStorage.getItem(‘token’);

token&&(config.headers[‘Authorization’]=token);

return config;

})

//响应拦截器

//从服务器获取结果到自己.then中间做的事

axios.interceptors.response.use(response=>{

//从服务器获取到数据，只把响应主题信息传给下一个then

return response.data;

},reason=>{

//服务器没有获取数据(网络层失败)

let response =null;

if(reason){

//服务器有响应，状态码是4/5开头的

response=reason.response;

//跟据状态码做出响应

switch(response.status){

case 401:

//一般情况401是未登录

break;

case 403:

//一般情况下是token过期

break;

case 404:

//地址不存在

break;

}

}else{

if(!window.navigator.onLine){

alert(‘网络已断开，请联网在试！！！’)

}

}

return Promise.reject(response);

})

//把处理好的axios暴露出去，让其他页面可以引用和使用

export default axios；

使用二次封装的axios

//发送请求

axios.get(‘/job’,{

data

});

fetch

fetch是浏览器内置函数，基于fetch可以像服务器发送请求，核心原理和ajax不一致（天生就是基于promise管理的） 终极方案，不论服务器返回的状态码是多少，都按照promise成功算，只有断网，才算失败

fetch(‘url’).then(res=>{

//json是fetch的方法

return res.json()

}).then(res=>{

//这个才是结果

console.log(res)

})

fetch封装拦截器

import qs form ‘qs’;

//设置请求前缀

let baseURL =‘http://127.0.0.1:3000’;

//暴露出去 第一个参数是路径 第二个是配置对象

export default function request(url,options={}){

url=baseURL+url;

//get系列请求处理 如果请求未填写默认get

!options.method?options.method=‘GET’:null;

if(options.hasOwnProperty(‘params’)){

//匹配这些字符 i忽略大小写

if(/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)){

const ask=url.includes(‘?’)?‘&’:‘?’;

url+=$ask${qs.stringify(params)};

}

delete options.params;

}

//合并配置项

options=OBject.assign({

//允许跨域携带资源凭证 same-origin同源可以 omit都拒绝

credentials:‘include’,

//设置请求头

headers:{}

},options);

options.headers.Accept=‘application/json’;

//token效验

const token localStorage.getIte 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 m(‘token’);

token&&(options.headers.Authorization=token);

//post请求

if(/(^POST|PUT)$/i.test(options.method)){

!options.type?options.type=‘urlencoded’:null;

if(options.type=== ‘urlencoded’){

options.headers[‘Content-Type’]=‘application/x-www-form-urlencoded’;

options.body=qs.stringify(options.body);

}

}

//拦截器

return fetch(url,options).then(response=>{

//返回的结果可能是非200状态

if(!/^(2|3)\d{2}$/.test(response.status)){

switch(response.status){

case 401:

break;

case 403:

break;

case 404:

break;

}

return Promise.reject(response);

}

return response,json();

}).catch(error=>{

if(!window.navigator.onLine){

//断开网络了，可以跳转到其他页面

return;

}

return Promise.reject(error);

})

}