前言
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。
他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。
原来前面讲过,封装好了一个request模块,但是其实封装的略显简陋,这里因为实际需要,又做了新的封装。
配置多域名请求不同URL
一般自己写项目时, 一个接口URL 就可以了。但在实际项目开发中,一个项目可能会请求不同的服务器的url。
这时,我们简单的配置下访问接口域名,然后不同域名的接口,直接换对象调用即可。
这样不管有多少个不同的接口,我们都可以很好的管理使用。
没有配置多url
是使用proxy来区别/api和/api/es的
[code] proxy: {\'/api/es\': {target: \'http://39.105.44.114:48080/\',changeOrigin: true,secure: false},\'/api\': {target: \'http://127.0.0.1:8080/\',pathRewrite: {\'^/api/webhook\': \'/webhook\'},changeOrigin: true,secure: false}}
如果配置好了多url的话:
/api/es这个就可以简化成/es
然后使用路径重写,改成/api/es
这样就不会出现在request中,baseURL因为只有一个/api而导致重复的问题
效果
/es,代表着server1/api/es
/api,代表着server2/api
这样可以有效减少冲突
封装http.js
这个是学习了juejin上的一篇博客:
创建单独文件来封装axios,封装的同时,你需要和
后端
协商好一些约定
-
请求头
: 来实现一些具体的业务,必须携带一些参数才可以请求
(例如:会员业务)
-
状态码
: 根据接口返回的不同
status
, 来执行不同的业务,这块需要和后端约定好。
-
请求拦截器
: 根据请求的请求头设定,来决定哪些请求可以访问。
-
响应拦截器
: 这块就是根据
后端
返回来的状态码判定执行不同业务