乐趣区

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 组件添加数据交互功能,敬请关注。

退出移动版