vue中用axios进行数据请求

一、vue-cli 2.0

1. 安装axios插件

npm指令：npm install axios --save

yarn指令：yarn add axios

2. 在组件中引入，可以在单个组件中引入，只请求该组件所需要的数据，也可以在父组件中引入，请求该父组件下所有子组件需要的数据

在mounted周期函数中执行方法A，方法A是在methods对象中定义的，该方法的功能是：让axios对象调用get（）方法和then（）方法，get方法是获取数据的地址url，then方法是对获取的数据进行处理，通过自定义方法B进行数据处理

3. 关于mock的假数据：

放在static文件夹下，因为src文件可以访问同级的static文件。

同时，开发环境下的url地址应该和线上环境下的url地址一样，我们要保证线上的代码是完全正确的，决不能再修改已经提交到master上的代码，那么我们需要做一个url的设置，当时开发环境的时候，加载本地模拟的数据，当时线上环境时，加载的就是服务器中的数据，且要保证url是线上地址。

4. 数据结构：

{
  "ret": true,
  "data": {
    "medicine": [
      {
        "id": "0001",
        "spell": "nanxin wanfeile",
        "name": "男性 万斐乐"
      },{
        "id": "0002",
        "spell": "nanxin jinge",
        "name": "男性 金戈"
      },{
        "id": "0003",
        "spell": "nanxin hexin",
        "name": "男性 和欣"
      },{
        "id": "0004",
        "spell": "nanxin wanaike",
        "name": "男性 万艾可"
      },{
        "id": "0005",
        "spell": "nanxin guilingji",
        "name": "男性 龟龄集30粒"
      },{
        "id": "0006",
        "spell": "nanxin suoyangbushenjiaonang",
        "name": "男性 锁阳补肾胶囊"
      },{
        "id": "0007",
        "spell": "nanxin nanbaojiaonang",
        "name": "男性 男宝胶囊30粒"
      },{
        "id": "0008",
        "spell": "nanxin yubiaobushenwan",
        "name": "男性 鱼鳔补肾丸"
      },{
        "id": "0009",
        "spell": "nanxin jinsuogujingwan",
        "name": "男性 金锁固精丸"
      },{
        "id": "00010",
        "spell": "nanxin shengjingpian",
        "name": "男性 生精片"
      }
    ]
  }
}

 二、vue-cli3.0

1. 新建文件：vue.config.js，该文件与package.json同级。vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

2. vue.config.js中的代码：

（1）通过required寻找数据路径，并将其引入。

（2）在devServe对象中设置端口port

（3）在DevServe对象中的before函数，参数为app，这是个对象，app调用get方法，意思是：当请求“/api/search”路径的时候，得到的是mockData的数据

const mockData = require("./mock/search.json");

module.exports = {
  //...  
  devServer: {
    port: 8080,
    before(app) {
      app.get("/api/search", (req, res) => {
        res.json(mockData);
      });
    }
  }
};

3. 组件中进行数据请求：

  created () {
    axios.get('/api/search').then(ref => {
      console.log(ref);
    })
  }

结果：