vue结合axios发送请求中产生的问题

上次从后端的角度解决了跨域的问题，实际上含有nignx动态代理的服务器接口访问配置是不需要考虑同源问题的，只需要保证浏览器别拒绝发出请求即可。那么我就将所谓的axios结合vue去测试数据的获取了。

---

首先要在vue项目中导入axios：

打开终端命令窗：输入npm install axios --save 下载完成后就可以使用axios请求库了。

可以直接写通用请求的样式代码：

export const GET = (url, params) => {
    return axios.get(`${base}${url}`, { params: params }).then(res => res.data)
}

这里的base就是服务器的统一接口入口：例如localhost:8080/api/

后面的url则是具体访问的请求接口，后面的params则是参数。

export default {
    login: params => {
        return API.GET('User/login', params)
    }
}

规范时只需要新建立一个js文件，将功能接口名配置好请求路径，至于后面的参数则是在其他的vue脚本中写方法时加入的，例如：

import api from './api/api'


let params = {
  userAccount: '1001',
  password: '1001'
}
api.login(params).then(function (response) {
  if (response.code == 1) {
    alert('自动校验axios成功')
  }
})

这里我们将这个代码写入main.js中，会发现运行vue项目并访问8080端口时直接就是调用login方法

可是我将其写到组件中，当我用APP组件调用这个组件时，却无法发起任何请求，这个问题应该是我们需要通过组件间通信的方式使得最后的请求方法跑到main.js中？可能是VM实例的缘故，我们知道组件其实是一个VC实例，但是VM实例才是掌控model AND view 中的数据与视图交互的重要枢纽。众多的VC也是由一个大的VM进行管理的，所以可以对外部网络发起请求的处理链路应该是追溯到组件树的根节点VM上发起才合理。

因为学习vue项目的相关视频我没有看了，所以这个猜测后续等我看完了vue项目的视频后会给出相应的结论。这个猜测先留在这里。