创新实训博客（44）——针对axios的封装的新的体验

前言

在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

  ， 来执行不同的业务，这块需要和后端约定好。

• 请求拦截器

  : 根据请求的请求头设定，来决定哪些请求可以访问。

• 响应拦截器

  ： 这块就是根据

  后端

  返回来的状态码判定执行不同业务