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

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.getItem(‘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);

})

}

跨域

跨域产生的原因和意义

//项目过大会进行服务器分离并进行高并发处理，如web服务器，图片服务器，数据服务器

云信息共享api：第三方api接口

有助于分离开发：开发跨域，部署同源

解决

修改本地host

jsonp

cors

proxy

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

发跨域，部署同源

解决

修改本地host

jsonp

cors

proxy

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

96道前端面试题：

• [外链图片转存中…(img-iWzPvS1P-1720085133594)]

常用算法面试题：

• [外链图片转存中…(img-b5k7GlOj-1720085133596)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

•