vue项目中使用fetch的实现方法
fetch的由来和定义
fetch的由来
众所周知,传统Ajax(指XMLHttpRequest)是最早出现的发送异步请求技术,其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题:XHR是一个设计粗糙的API,不符合关注分离的原则;配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的Promise,generator/yield,async/await友好。而Fetch的出现就是为了解决XHR存在的问题。
fetch的定义和使用
MDN中的描述:
FetchAPI提供了一个获取资源的接口(包括跨域请求)。任何使用过XMLHttpRequest的人都能轻松上手,但新的API提供了更强大和灵活的功能集。but因为凄惨的兼容性,让这个东东用起来比较困难。那我可以自己封装一下,对于不支持fetch的浏览器便使用ajax代替(见下文)。
Fetch的核心在于对HTTP接口的抽象,包括Request,Response,Headers,Body,以及用于初始化异步请求的globalfetch。其中,globalfetch方法的语法定义:
fetch(input[,init]);
input:定义要获取的资源。可以是一个资源的URL字符串,也可以是一个Request对象。
init:可选,一个配置项对象,包括所有对请求的设置。包括:method,headers,body,mode,credentials等返回值:Promise
切记一点:Fetch是基于promise设计的,它不是ajax的进一步封装,而是原生jsAPI,没有使用XMLHttpRequest对象。
fetch的优点和缺点
优点:
1.语法简洁,更加语义化
2.基于标准Promise实现,支持async/await
3.同构方便,更加底层,提供的API丰富(request,response,body,headers)5.脱离了XHR,是ES规范里新的实现方式
缺点:
1.fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回400,500错误码时并不会reject。
2.fetch默认不会带cookie,需要添加配置项:credentials:'include'。
3.fetch不支持abort,不支持超时控制,造成了流量的浪费。
4.fetch没有办法原生监测请求的进度,而XHR可以
补充知识点:
Fetch的mode配置项有3个取值:
same-origin:该模式是不允许跨域的,它需要遵守同源策略;
cors:该模式支持跨域请求,顾名思义它是以CORS的形式跨域;
no-cors:该模式用于跨域请求但是服务器不带CORS响应头,也就是服务端不支持CORS;目前,针对跨域请求,cors模式是常见的实现。
vue项目中完美封装fetch
话不多少,直接附上代码。
env.js文件,如下:
/** *baseUrl:域名地址 *routerMode:路由模式 */ letbaseUrl=''; letrouterMode='history'; if(process.env.NODE_ENV=='development'){ baseUrl='http://localhost:3000'; }else{ baseUrl='http://xxxx这里是线上地址xxx'; } export{baseUrl,routerMode}
fetch.js文件,如下:
import{baseUrl}from'./env' exportdefaultasync(url='',data={},type='GET',method='fetch')=>{ type=type.toUpperCase(); url=baseUrl+url; //此处规定get请求的参数使用时放在data中,如同post请求 if(type=='GET'){ letdataStr=''; Object.keys(data).forEach(key=>{ dataStr+=key+'='+data[key]+'&'; }) if(dataStr!==''){ dataStr=dataStr.substr(0,dataStr.lastIndexOf('&')); url=url+'?'+dataStr; } } //对于支持fetch方法的浏览器,处理如下: if(window.fetch&&method=='fetch'){ letrequestConfig={ //fetch默认不会带cookie,需要添加配置项credentials允许携带cookie credentials:'include', method:type, headers:{ 'Accept':'application/json', 'Content-Type':'application/json' }, mode:"cors",//以CORS的形式跨域 cache:"force-cache" } if(type=='POST'){ Object.defineProperty(requestConfig,'body',{ value:JSON.stringify(data) }) } try{ constresponse=awaitfetch(url,requestConfig); constresponseJson=awaitresponse.json(); returnresponseJson }catch(error){ thrownewError(error) } }else{//对于不支持fetch的浏览器,便自动使用ajax+promise returnnewPromise((resolve,reject)=>{ letrequestObj; if(window.XMLHttpRequest){ requestObj=newXMLHttpRequest(); }else{ requestObj=newActiveXObject;//兼容IE } letsendData=''; if(type=='POST'){ sendData=JSON.stringify(data); } requestObj.open(type,url,true); requestObj.setRequestHeader("Content-type","application/x-www-form-urlencoded"); requestObj.send(sendData); requestObj.onreadystatechange=()=>{ if(requestObj.readyState==4){ if(requestObj.status==200){ letobj=requestObj.response if(typeofobj!=='object'){ obj=JSON.parse(obj); } resolve(obj) }else{ reject(requestObj) } } } }) } }
以上代码,亲测有效。Over,thanks!希望对大家的学习有所帮助,也希望大家多多支持毛票票。