axios包用于根据开发环境default判断使用哪个baseUrlcofing/index.jsexport{title:"admin",baseUrl:{//开发环境dev:"http://localhost:5000/api/",pro:"http://localhost:5000",},};第一种方式：使用promise和asyncawait封装axios统一处理请求异常，在外层包裹一个自己创建的promise对象。当请求失败时，不会reject(error)，而是显示错误提示，异步获取的不是response，而是response.data。当请求成功解析时：resolve(response.data)api/ajax.jsimportaxiosfrom"axios";exportdefaultfunctionajax(url,data={},type="GET"){returnnewPromise((resolve)=>{letpromise;//1.执行ajax请求if(type==="GET"){//发送GET请求promise=axios.get(url,{params:data});}else{//发送POST请求promise=axios.post(url,data);}//2.成功resolvepromise.then((result)=>{resolve(result.data);}).catch((err)=>{console.log("Requesterror:"+err);});});}api/index.js统一管理所有api接口importajaxfrom"./ajax";importconfigfrom"../config/index";//确定开发环境constbaseUrl=process.env.NODE_ENV===“发展”？config.baseUrl.dev:config.baseUrl.pro;//登录exportconstreqLogin=(username,password)=>ajax(baseUrl+"/login",{username,password},"POST");//获取列表exportconstreqList=(listId)=>ajax(baseUrl+"/manage/list",{listId});reqLogin使用import{reqLogin}from"../../api";async(values)=>{const{username,password}=values;//请求登录constresult=awaitreqLogin(username,password);};方法二：使用axios拦截器封装api/ajax.js//二次封装axios拦截器importaxiosfrom"axios";importconfigfrom"../config/index.js";//确定开发环境constbaseUrl=process.env.NODE_ENV===“开发”？config.baseUrl.dev:config.baseUrl.pro;//封装请求类classHttpRequst{constructor(baseUrl){this.baseUrl=baseUrl;}//获取内部设置getInsideConfig(){constconfig={baseURL:this.baseUrl,header:{},};返回配置；}//axios官方拦截器interceptors(instance){instance.interceptors.request.use(function(config){//在发送请求之前做一些事情console.log("interceptprocessingrequest");returnconfig;},function(error){//做一些关于请求错误的事情returnPromise.reject(错误);});instance.interceptors.response.use(function(response){console.log("Processresponse");//使用响应数据做一些事情returnresponse.data;},function(error){console.log(error);//处理响应错误returnPromise.reject(error);});}request(options){//请求constinstanse=axios.create();//解构赋值options={...this.getInsideConfig(),...options};this.interceptors(instanse);返回实例（选项）；}}exportdefaultnewHttpRequst(baseUrl);api/index.jsimportajaxfrom"./ajax";exportconstreqList=(params)=>{returnajax.request({url:"/manage/list",方法：“发布”，数据：参数，}）；}；使用reqListimport{reqList}from"../../api";reqList.then((res)=>g吨;{console.log(res.data);});
