JS中封装axios来管控api的2种方式
前言:我们在开发项目的时候,往往要处理大量的接口.并且在测试环境开发环境生产环境使用的接口baseurl都不一样这时候如果在开发环境完成之后切换每一个接口的baseurl会变的非常的麻烦,(要去每一个发出请求的页面都要去修改地址)
所以为了更好的管控这些api,我们需要自己封装一个axios定义统一的接口baseurl这样在环境的切换的时候更好的管控和修改.话不多说上代码!!!
自己创建一个api文件夹即可
importaxiosfrom'axios' 为了处理java字符串问题 importqsfrom'qs' 创建一个axios实例在其中设置超时时间和响应头 consthttp=axios.create({ baseURL:process.env.VUE_APP_MOCK_DATA_URL,//api的base_url timeout:3000, headers:{ 'Content-Type':'application/json;charset=utf-8' } }) /** *请求拦截可以在发送请求的时候加上判断信息 */ http.interceptors.request.use(config=>{ ***** returnconfig },error=>{ returnPromise.reject(error) }) /** *响应拦截可以对传回的数据做出判断 */ http.interceptors.response.use(response=>{ returnresponse },error=>{ returnPromise.reject(error) })
将这个封装好的axios暴露出去
exportdefaulthttp
在main.js中引入并且挂载到原型对象上
importhttpfrom'@/api/api.js' Vue.prototype.$http=http
第一种封装的方式一般就是对于api数量不是特别多的时候复杂层级不高的情况这样封装完全可以
第二种方式
'usestrict'
同样的也需要引入这两个包
importaxiosfrom'axios' importqsfrom'qs' //设置拦截器默认请求url得前缀 //axios.defaults.baseURL=process.env.NODE_ENV==='production'?'/custInfo': //'127.0.0.1:8888', //axios.interceptors.request.use(config=>{ //////loading //returnconfig //},error=>{ //returnPromise.reject(error) //}) // //axios.interceptors.response.use(response=>{ //returnresponse //},error=>{ //returnPromise.resolve(error.response) //}) exportdefault{ post(url,data){ returnnewPromise((resolve,reject)=>{ axios({ method:'post', url, //qs这个插件主要是为了解决java后台接受到得参数必须是字符串 data:qs.stringify(data), headers:{ 'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8' } }).then((res)=>{ resolve(res) }).catch((error)=>{ reject(error) }) }) }, get(url,params){ returnnewPromise((resolve,reject)=>{ axios({ method:'get', url, params,//get请求时带的参数 }).then((res)=>{ resolve(res) }).catch((error)=>{ reject(error) }) }) } }
这种封装好之后,就可以在创建一个文件夹 然后把所有的接口都写在一起
getCustValue(params){ return$http.post('/custOverview/getCustValue',params); }, getTacntrt(params){ return$http.get('/dict/getTacntrtMgmtMsgMonth',params); }, query(params){ return$http.post('/indexManager/queryVipFlowCount',params); }
然后一一列举就可以非常好的梳理api
总结
以上所述是小编给大家介绍的JS中封装axios来管控api的2种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!