vue构建小项目-axios（四）

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': ''
        }
      }

参考:proxyTable解决跨域问题

看完这篇文章发现，和我猜的差不多嘛~~~
以上都是在开发环境下解决的跨域问题啊，那生产环境呢，难道我要在服务器上部署安装node环境，安装这一大堆vue依赖最后 npm run dev吗？当然不是，打包-部署-nginx反向代理，这些是下次整理的内容了。