基于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方法及调用实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。