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

//监听请求发送和状态码返回

xhr.onreadystatechange=function(){

//不等于200返回服务器的报错信息

if(!/^2\d{2}$/.test(xhr.status)){

reject(xhr);

return;

}

//判断状态码是否为200和是否请求装态码是否为4

if(/^2\d{2}$/.test(xhr.status)&&xhr.readyState===4){

//成功从服务器获取结果,服务器返回时json字符串所以要转成json对象

//判断success是否传递为函数为函数则执行不为则取消

//typeof options.success=== ‘function’?options.success(JSON.parse(xhr.responseText)):null;

//进阶 请求成功且状态码为2xx的时候则返回数据

resolve(JSON.parse(xhr.responseText));

}

};

//如果不是get请求则通过发送请求体进行传递参数,send发送请求必须写到最后面

xhr.send(options.data)

})

}

调用封装的ajax

b.js

import ajax form ‘./a.js’;

ajax({

url:‘请求地址’,

method:‘get’,

data:{},

success:function(res){

console.log(res)

}

})

封装ajax点方法

[‘get’,‘psot’,‘delete’,‘put’,‘head’,‘options’].forEach(item=>{

ajax[item]=function(url=‘’,data={}){

return ajax(

{

url,

method:item,

data

}

)

}

})

//导出

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)){

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总