Vue项目中使用Axios

　　封装请求
　　在请求或响应被then或catch处理前拦截它们importaxiosfromaxios；axios配置varinstanceaxios。create（｛headers：｛ContentType：applicationjson，｝，timeout：30000，baseURL：，接口请求地址｝）拦截重复请求letpending〔〕；声明一个数组用于存储每个ajax请求的取消函数和ajax标识letcancelTokenaxios。CancelToken；letremoveRepeatUrl（config）｛letcomValueconfig。methodget？qs。stringify（config。params）：qs。stringify（config。data）；for（letpinpending）｛if（pending〔p〕。uconfig。urlconfig。methodcomValue）｛当前请求在数组中存在时执行函数体pending〔p〕。f（）；执行取消操作pending。splice（p，1）；把这条记录从数组中移除｝｝｝letsaveRepeatUrl（config）｛letcomValueconfig。methodget？qs。stringify（config。params）：qs。stringify（config。data）；console。log（comValue）config。cancelTokennewcancelToken（（c）｛pending。push（｛u：config。urlconfig。methodcomValue，f：c｝）；自定义唯一标识｝）；｝｝｝添加请求拦截器instance。interceptors。request。use（config｛在发送请求之前做些什么，比如传tokenremoveRepeatUrl（config）；在一个ajax发送前执行一下取消操作saveRepeatUrl（config）；保存请求地址returnconfig｝，error｛对请求错误做些什么console。log（error）fordebugreturnPromise。reject（error）；｝）添加响应拦截器instance。interceptors。response。use（response｛removeRepeatUrl（response。config）；执行取消操作，把已经完成的请求从pending中移除对响应数据做点什么constresresponse。data；对错误代码做处理returnresponse；｝，error｛对响应错误做点什么console。log（errerror）fordebugreturnPromise。reject（error）；｝）；exportdefaultinstance；post请求方法paramurlparamdatareturns｛Promise｝exportfunctionpost（url，data｛｝）｛returnnewPromise（（resolve，reject）｛instance。post（url，data）。then（response｛对接口错误码做处理resolve（response。data）；｝，err｛reject（err）；｝）｝）｝get请求方法paramurlparamdatareturns｛Promise｝exportfunctionget（url，data｛｝）｛returnnewPromise（（resolve，reject）｛instance。get（url，｛params：data｝）。then（response｛resolve（response）；｝）。catch（err｛reject（err）｝）｝）｝封装所有请求parammethedparamurlparamdataparamheadersreturns｛Promise｝exportfunctionrequest（methed，url，data｛｝，headers）｛returnnewPromise（（resolve，reject）｛instance（｛method：methedpost，url：url，params：methedget？data：，data：methed！get？data：，headers：headers｛ContentType：applicationjson｝，｝）。then（response｛对接口错误码做处理resolve（response。data）；｝）。catch（err｛reject（err）｝）｝）｝
　　调用方式
　　在main。js文件中引用
　　import｛post｝from。utilshttp
　　Vue。prototype。postpost；
　　最好将项目所有接口请求放在一个文件中，方便管理新建文件api。jsimport｛request｝from。axios。js用户登录接口exportfunctionuserLogin（data）｛returnrequest（post，接口地址，data）；｝在其他页面引用import｛userLogin｝from。api。jsuserLogin（｛｝）。then（res｛｝）；axios跨域
　　在config的index。js文件中的dev属性中添加一个属性proxyTable：proxyTable｛api：｛target：URL，changeOrigin：true，pathRewrite：｛api：｝｝｝
　　然后在axios里面访问apixxx就可以成功访问了这种方式只能本地测试环境运行，对正式环境无效（需要配置环境生效）