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

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

原生ajax简易封装

a.js
//通过封装成一个js文件并暴露出去
//使用多个实参必须按照顺序进行传递而且还不能传空,所以采用了options配置对象,就是设置一个形参,
//传递一个对象成为一个实参
export default function ajax(options={}){
//合并第一个参数并重新赋值给options,如果options里面有值则会替换掉第一个对象里面的值
options=Object.assign({
url:'',
method:'get',
data:null,
//因为采用了promise所以注释了
//sucess:null
},options);
//引入qs.js库进行处理数据
options.data=qs.stringify(options.data);
//判断是否是get请求,如果是get请求就把data里面数据转换成键值对字符串拼接
let isGET=/^(GET|DELETE|HEAD|OPTIONS)$/.test(options.method);
//如果是get请求且数据存在则进行处理
if(isGET&&options.data){
//判断路径是否存在问号并拼接数据
options.url+=`${option.url.includes('?')?'&':'?'}${options.data}`;
//把data设置为空
options.data=null;
}
//通过promise把当前封装的ajax改成异步
return new Promise((resolve,reject)=>{
//创建ajax对象
let xhr= new XMLHttpRequest;
//请求前的准备,设置请求方式和请求地址
xhr.open(options.method,options.url);
//监听请求发送和状态码返回
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)){
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
第一种方案:通过修改本地的HOST进行请求,可以进行DNS处理,DNS处理就是设置俩个地址,如果本地的DNS访问不到
就访问网络的DNS
属于骗过浏览器
需要访问把你访问的地址映射到你现在的ip
类似于反向代理
第二种方案:jsonp
第一:jsonp需要服务器支持
第二:由于script本身就是下载资源的,所有只能采用get请求
安全系数低
第三种:cors
服务端设置cors之后不能携带cookie
要不只设置一个源,这个一个源可以携带cookie
Vue和react都是基于webpack,webpack里面的webpack-dev-sever能起一个web服务,Web服务中支持跨域处理
,叫proxy(跨域资源处理),跨域请求代理
需要在webpack.config.js里面的devServer加一个proxy属性
proxy:{
//拦截开头带/的请求,代理到target属性中
'/':{
target:"http://127.0.0.1:3000",
changeOrigin:true
}
}
发送请求,前面什么都不加就是向自己发送请求,整个web服务都是dev-server帮我们启的,然后在proxy里面
的/属性代理到发送请求的地址
fetch('/user')
相关文章
|
15天前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
15 2
|
15天前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
13 0
|
15天前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
17 1
|
15天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
52 0
|
15天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
15天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
15天前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
26 0
N..
|
15天前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
31 1
|
15天前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
66 0
|
15天前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤