专栏首页大前端666Vue实战系列—项目数据交互-axios(4)
原创

Vue实战系列—项目数据交互-axios(4)

1.axios地址

https://github.com/axios/axios

2.安装

npm install axios

3.使用

3.1 用在哪?

​ main.js 全局

3.2 什么时候用?

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

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

3.3 怎么用

数据从哪里来:

1.美团API接口 ,

​ 优点:贴近工作情形

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

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

​ 优点:贴近工作情形,自己造数据想怎玩怎么玩

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

3.搭建本地模拟数据

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

​ 缺点:写JSON、配置服务器麻烦(如使用express或者mockjs)

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

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

美团外卖官方接口:

http://developer.waimai.meituan.com/home/doc/food/1

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VUE实战—商品控件与购物车联动(9)

    在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写。

    前端大彬哥
  • VUE实战—商品展示切图(7)

    上次我们通过设计评价组件这个过程,了解到了组件设计中的良好的习惯,比如,文件夹如何支撑组件,图片,组件路径的存放于设置。

    前端大彬哥
  • Vue实战系列—如何细化Vue项目目录设计(2)

    data:用来模拟我们请求的数据内部主要存放json数据格式的数据,比如评价,商品等 。

    前端大彬哥
  • 如何处理错误消息Query XXX is invalid or contains errors

    如何debug这个错误,找到哪一行ABAP code抛出的exception? tcode /IWFND/ERROR_LOG, 选择对应的entry,点Act...

    Jerry Wang
  • 【一起来烧脑】一步学会TypeScript入门

    字符串新特性 变量和参数新特性 函数新特性 匿名函数 for of循环 TypeScript语言中的面向对象特性

    达达前端
  • 重读《JavaScript高级程序设计》

    ECMAScript 函数不能像传统意义上那样实现重载。而在其他语言(如Java)中,可以为一个函数编写两个定义,只要这两个定义的签名(接受的参数类型和数量)不...

    嘉明
  • ES6/ES7/ES8/ES9/ES10常用特性和新特性

    变量的改变,添加了块级作用域的概念 let声明变量(块级作用域),let是更完美的var,它声明的全局变量不是全局属性widow的变量,这便解决了for循环中变...

    公众号---志学Python
  • SaaS/企业级服务获客(销售)的“坦途”

    在 1993 年奥斯卡最佳影片、最佳男主角、最佳导演奖赢家《闻香识女人》的片尾,阿尔·帕西诺有段精彩的独白。其中的一句话道出了这个悲剧主人公自以为的人生真谛: ...

    人称T客
  • 作为时代齿轮的Wi-Fi 6,如何转动园区网络的产业格局

    在这个并不平静的春天,我们正在期盼一场胜利的到来。与此同时,我们也在期待2020年的技术升级、产业迭代、行业智能化,能够给经济发展带来更多惊喜,以弥补全世界在疫...

    脑极体
  • js 函数作用域与this 的指向实例 原

    函数的定义分为2种,(1)直接定义-window 下,内部定义;(2)对象的方法(或对象原型的方法),下面的函数fn1与fn2 是直接定义的函数, doFun...

    tianyawhl

扫码关注云+社区

领取腾讯云代金券