vue中用axios进行数据请求

忘是亡心i 2022-04-12 03:50 689阅读 0赞

**一、vue-cli 2.0**

1. 安装axios插件

npm指令：npm install axios --save

yarn指令：yarn add axios

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

![20181130175714944.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

3. 关于mock的假数据：

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][]

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的数据**

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

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

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2][]

[20181130175714944.png]: /images/20220412/1b58fede3bb040659f764a903ddbbbff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220412/ca6edb28c99f4c38a69805aa3d053641.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20220412/ba1bb49b9a574a839ea6308f895fdbd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20220412/29c890bf89814613a874e5233952249b.png