Vue实战项目数据交互axios4

1.axios 地址

https://github.com/axios/axios

2. 安装

npm install axios

3. 使用

1. 用在哪？

    main.js 全局

2. 什么时候用？

    生命周期：https://cn.vuejs.org/v2/guide/instance.html

    created 的时候 发起异步请求获取数据

3. 怎么用

数据从哪里来：

1. 美团 API 接口，

 优点：贴近工作情形

缺点：官方接口申请有门槛，手续繁琐，限制多，速度慢，非官方不稳定, 容易失效

2. 自己搭建线上服务器数据

 优点：贴近工作情形，自己造数据想怎玩怎么玩

缺点：写 JSON 麻烦，不稳定，速度慢，域名空间收费，繁琐

3. 搭建本地模拟数据

 优点：贴近工作情形，自己造数据想怎玩怎么玩，访问速度快，稳定

缺点：写 JSON、配置服务器麻烦（如使用 express 或者 mockjs）

结论：为了工作使用 1，为了灵活性使用 3，自己有现成的服务器或空间，从 2、3 中选的话，选择 2

我们使用 1, 按照工作标准来：

美团外卖官方接口：

http://developer.waimai.meitu…

GET 例子：

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {// always executed});

POST 例子：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {console.log(response);
  })
  .catch(function (error) {console.log(error);
  });

总 结

本文我们从安装，到 axios，让我们对 vue 的数据相关的技术点有了一定了解，我们将一步步完善项目，丰富我们的技术经验。

下篇：我们通过为项目 header 组件添加数据交互功能，敬请关注。