基于axios封装fetch方法及调用实例
基础axios用法请看axios官网
//依赖于axios对私有ajax进行修改
importQsfrom'qs'
importaxiosfrom'axios'
importrouterfrom'router/index'
import{errorPrompt,loading,closeLoading}from'util/util'
exportconststatus={
SUCCESS:'100',
NET_ERR:'101',//网络连接异常，请稍候再试
BIZ_ERR:'103',//业务请求异常
NO_AUTH:'104'
}
exportfunctionfetch(options){
returnnewPromise((resolve,reject)=>{
letinstance=axios.create({
baseURL:process.env.BASE_API,
timeout:2000,
headers:{
//"tracecode":window.encodeURIComponent(JSON.stringify({"ua":"","cv":"20161230","token":"3dwo0onUUsPKVJcP8tk","os":"windows10","app":"kind","ws":"1*1","pkey":"f8caf7d7-a5d4-4710-b06f-28a922b6a467"}))
"tracecode":commonBizHeader(isManager(options)),
'Content-Type':'application/x-www-form-urlencoded'
},
transformRequest:[function(data){
//Dowhateveryouwanttotransformthedata
letret=''
for(letitindata){
ret+=encodeURIComponent(it)+'='+encodeURIComponent(data[it])+'&'
}
returnret
}]
});
instance.interceptors.request.use(function(response){
//请求拦截
loading();
returnresponse;
},function(error){
console.log('error请求拦截:',error)
returnPromise.reject(error);
});
instance(options)
.then(response=>{
constres=response.data;
if(res.errorCode!=status.SUCCESS){
switch(res.errorCode){
casestatus.NET_ERR:{
errorPrompt(res.errorMsg)
reject(res)
break;
}
casestatus.BIZ_ERR:{
errorPrompt(res.errorMsg)
reject(res)
break;
}
casestatus.NO_AUTH:{
errorPrompt(res.errorMsg)
letsession=require("storejs")
if(isManager(options)){//管理端
session.remove("managerUserToken")
router.push({path:'/manager/login'})
}else{
session.remove("clientUserToken")
router.push({path:'/client/login'})
}
reject(res)
break
}
}
}
closeLoading();
resolve(res);
}).catch(error=>{
closeLoading();
errorPrompt('网络连接错误，请检查您的网络')
console.log('error',error);//fordebug
reject(error);
});
});
}
functioncommonBizHeader(isManager){
letsession=require("storejs");
letparams={}
params['ua']=window.navigator.userAgent.toLowerCase()
params['cv']='123456'
params['ws']=window.screen.height+'*'+window.screen.width
params['token']="123456"
params['os']=window.navigator.appCodeName
if(isManager){
params['token']=session.get('managerUserToken')//管理-用户令牌
}else{
params['token']=session.get('clientUserToken')//用户-用户令牌
}
params['app']='kind'
letUUID=session.get('pkey')
if(!UUID){
UUID=getUUID()
window.localStorage.setItem('pkey',UUID)
}
returnencodeURIComponent(JSON.stringify(params))
}
functionisManager(options){
returnoptions&&options.url&&options.url.indexOf("/api/worker")!=-1
}
/**
*获取UUID
*@returns{string}
*/
exportfunctiongetUUID(){
letlen=32//32长度
letradix=16//16进制
letchars='0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
letuuid=[]
leti
radix=radix||chars.length
if(len){
for(i=0;i
这是在vue的项目中：在api中调用方法如下(react刚开始学，还在做简单demo)
import{fetch}from'api/fetch'
exportconstcallAuthCode=(userPhone)=>{
returnfetch({
url:'/api/auth/code',
method:'post',
data:({
userPhone:userPhone,
}),
})
}
因为我们这边的后台要求严格区分get/post请求，所以封装的方法调用中必须带有method,如后台已经处理好，全部可进行post请求，则可以参照axios官网里面将方法全部改为.post
关于fetch方法的说明：主要进行封装了请求拦截，响应拦截，默认请求体由json格式转换form格式，当然，这些都是在axios官网里可以找到的，不过是集合下了而已
关于请求头部分请不要直接套用，这是我们这边后台要求特殊配置的，后台接口三端共用，必须区分是哪里在调用
以上这篇基于axios封装fetch方法及调用实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。