配置vite代理和区分测试/生产环境，封装axios接口请求

Question

如题所述

Answer 1

分享一下axiosbaseURL的配置和接口请求的封装。

优势主要有以下几点

支持自动切换测试和生产环境，支持手动切换本地环境；

划分好所有接口api地址，封装所有api请求的方法，更方便在项目中添加接口；

如果接口超时可以全局捕获，统一处理；

一、配置vue.config.js文件

有时候我们需要获取测试环境的数据，有时候则需要生产环境的数据，那么一次性配置好代理方式，就不用反复重启我们的本地服务了。

/vue.config.js

module.exports={devServer:{proxy:{'^/dev2test':{target:'https://api.test.cn',//测试changeOrigin:true,pathRewrite:{'^/dev2test':'/specific-test',},},'/dev2production':{target:'https://api.prod.cn',//生产changeOrigin:true,pathRewrite:{'^/dev2production':'/',},},},},};二、添加对接口baseUrl判断的变量

通过process.env.NODE_ENV判断开发环境和非开发环境，如果是非开发环境还可以通过部署域名window.location.hostname来判断环境，使得测试环境代码和生产环境请求代码是同步的，不用每次上生产还要注释或者修改baseUrl内容，减少了人工操作失误带来的损失。

/src/api/environment.js

/***判断环境返回响应的接口前缀*/exportconstURL_PREFIX={//开发环境接口代理0:测试；1:生产DEV:['/dev2test','/dev2production'][0],//测试环境接口基础urlTEST:'/specific-test',//生产环境基础基础urlPROD:'/',};exportconstisDevelopEnv=process.env.NODE_ENV==='development';//是否为开发环境exportconstisTestEnv=window.location.hostname==='api.test.cn';//是否为测试环境/*接口地址*/exportconstcustomBaseUrl=isDevelopEnv?URL_PREFIX.DEV:isTestEnv?URL_PREFIX.TEST:URL_PREFIX.PROD;三、创建axios实例和封装请求方法，添加超时拦截

将我们的接口路径统一划分到一个文件夹，使用一个对象表进行记录，除了支持path属性，还可以根据业务添加请求方法method或者是否鉴权等信息。

/src/api/urlList.js

/*接口路径列表*/exportconstapiList={login:{path:`/box/login/url`},getToken:{path:`/box/getToken`},};

将上面的接口路径分别封装成功一个axios请求，同时暴露出一个对象，该对象拥有所有多个promise请求，方便在业务中使用或者直接注册到Vue根实例上。同时还可以在响应拦截中，捕获超时的错误信息，进行请求超时提示。

/src/api/index.js

importaxiosfrom'axios';import{customBaseUrl}from'./environment';import{apiList}from'./urlList';/*初始化axioas*/letservice=axios.create({baseURL:customBaseUrl,timeout:20000,});/*封装接口请求*/constmethods=Object.keys(apiList).reduce((acc,cur)=>{let{path,method='get'}=apiList[cur];constpromise=async(params)=>{constkey=method==='get'?'params':'data';letconfig={method,[key]:params,};let{data}=awaitservice(path,config);returndata;};//确保返回的均为promisereturnObject.assign(acc,{[cur]:promise,});},{});/*响应拦截*/service.interceptors.response.use((response)=>response,(error)=>{//拦截接口超时constisTimeOut=error.code=='ECONNABORTED'&&error.message.indexOf('timeout')!==-1;if(isTimeOut){constToast=undefined;//可引入vant的Toast组件Toast&&Toast.clear();Toast&&Toast.fail('网络繁忙，请稍后重试');}//处理响应失败returnPromise.reject(error);});exportdefaultmethods;四、基本使用

直接通过import导入就可以使用了，如果有需要还可以全局注册到Vue实例上。

/src/App.vue

importapisfrom'./api/index';exportdefault{name:'App',components:{},created(){apis.login();}}

logo设计

创造品牌价值

¥500元起

APP开发

量身定制，源码交付

¥2000元起

商标注册

一个好品牌从商标开始

¥1480元起

公司注册

注册公司全程代办

¥0元起

查

看

更

多

官方电话官方服务
官方网站八戒财税知识产权八戒服务商企业需求数字市场