axios简介
什么是 axios？
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
安装
$ npm install axios
请求样例
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(res=>{}).catch(err=>{});
华丽的分割线~，以上都是摘抄的官网，下面介绍下我再实际开发中遇到的问题吧。
这里有个注意的地方，箭头函数：箭头函数是this作用域是由上下文决定的，这是在定义箭头函数时就这么规定的。所以这this还是指向了vue的实例，而不是当前的function函数。
axios的引入
import axios from 'axios'
import Mint from 'mint-ui'
Vue.use(Mint)
Vue.prototype.$axios = axios
// 把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求
Vue.prototype.HOME = '/api'
这里发现axios不能像Mint一样use引入，全局使用。一开始不理解，然后就看到一篇文章：
vue全局使用axios的方法，发现还是不理解啥意思。我挂载到原型上有什么问题吗？
这是一位codeman回复，还是很好帮助理解的。
热心的codeman：在我看来，axios 的定位是 HTTP 工具库，在设计上是作为前后端数据交互的接口层。是和业务无关的，不应该使用 this 和组件关联。应该抽象 API 层出来，在 API 层里面使用 axios 就够了，没必要污染原型。
那么继续学习就引入了vue-axios。
Object.defineProperties(Vue.prototype, {
axios: {
get() {
return axios
}
},
$http: {
get() {
return axios
}
}
})
看到vue-axios的源码，也是不太明白，这里意思是 是不是吧axios做为属性定义在Vue的原型上？但是实际测试的时候，这种方式引入确实不是prototype上的属性，而是vue的属性。那就留个小尾巴吧~~
axios跨域
现在做的项目基本上都是前后端分离，前端再也不依赖后端的框架和选型了，只需要提供数据支持，那么剩下的都交给前端来展示吧。那么这个时候就会出现一个问题：跨域
当前端访问的路径和后台提供服务的url不在一个域内。那么就是危险的，就是不合法的，就是不能访问的，我是这么理解的。
那么如何解决一个问题呢？我们中间架设一层服务，作为中转不就可以了吗？其实应该就是这样的思路（我猜的）。。。
在项目中解决axios跨域问题：
config->index.js
proxyTable: {
'/api': { //此处并非和url一致
//target: 'http://192.168.0.XXX:8080',
target: 'http://192.168.10.XXX:8070',
changeOrigin: true, //允许跨域
pathRewrite: {
'^/api': ''
}
}
看完这篇文章发现，和我猜的差不多嘛~~~
以上都是在开发环境下解决的跨域问题啊，那生产环境呢，难道我要在服务器上部署安装node环境，安装这一大堆vue依赖最后 npm run dev吗？当然不是，打包-部署-nginx反向代理，这些是下次整理的内容了。
