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