专栏首页大前端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 牛刀小试]:第十五章 - 传统开发模式下的 axios 使用入门

      在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,...

    程序员宇说
  • Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios

    Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios 2017年8月补充 2016年,我写了一系列的 V...

    FungLeo
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结 前情回顾 去年写的那一套东西,虽然我也写得非常的认真,...

    FungLeo
  • 从零搭建 Vue 开发环境

    由于最近公司需要做H5页面,然后嵌入到微信公众号中去,从公众号菜单点击进入H5页面进行操作,需要使用 Vue 来做。之前由于部门中没有使用 Vue 做过任何下项...

    Java技术编程
  • 一步步使用SpringBoot结合Vue实现登录和用户管理功能

    前后端分离开发是当今开发的主流。本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能。通过这...

    三分恶
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之用户登录(二)

    通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之环境搭建(一)的介绍,我们已经搭建好本地开发环境并且运行成功了,今天主要介绍登录功能。

    crudapi
  • 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例

    通过URLSearchParams传递参数(application/x-www-form-urlencoded)

    常见_youmen
  • Javascript[0x08] -- axios基础应用

    对于axios的学习,大致可以分为三部曲,第一就是基础知识你能够灵魂运用,第二就是能够根据自己项目需要封装一下axios库,第三个就是看源码吧,能看得懂,讲的出...

    璀错
  • 在没有DOM操作的日子里,我是怎么熬过来的(终结篇)

    前言 在我写终结篇的日子里,Vue版本稳定在2.9.1。当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿。 接下来,...

    闰土大叔
  • 架构图以及vue的简介

    MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表...

    Dawnzhang
  • 基于Vue+VueRouter+Vuex+Axios的用户登录态路由级和接口级拦截的原理与实现

    前后端分离开发、独立部署,为前端的开发人员提供了极大的便利,同时也带来了新的挑战。

    胡哥有话说
  • 写给后端同学的vue

    3. vue create hello-world // 用vue 初始化hello-world 项目

    lyb-geek
  • 基于数据分析的图书管理系统(全栈)

    基于Vue全家桶(2.x)+NodeJs+Express+MongoDB+ES6+iview制作的图书管理系统,通过该系统来学习当下最流行的大框架和技术,采用前...

    念念不忘
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之表关系(六)

    通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,我们已经完成了元数据中动态表单设计功能,本文主要介绍表关系功能的实现。

    crudapi
  • Vue.js + Node.js + Express + MySQL示例:构建全栈CRUD应用程序

    上次修改时间:2020年10月16日 bezkoder Full Stack,Node.js,Vue.js

    ccf19881030
  • 源码分享-基于vue+elementUI后台管理系统

    今天分享的源码是我很早之前gitee上开源的一个管理后台模版,是基于vue和elementUI的一个基础版,技术栈使用:vue2 + vuex + vue-ro...

    青年码农
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件 前情回顾 在上一篇《Vue2...

    FungLeo
  • vue项目搭建及基本配置

    准备阶段会将项目环境配置完毕,包含 node、 npm、 webpack和 vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。

    流眸
  • 从 0 开始手把手带你搭建一套规范的 Vue3.x 工程化项目

    Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!...

    XPoet

扫码关注云+社区

领取腾讯云代金券