VUE使用axios调用后台API接口的方法


Posted in Javascript onAugust 03, 2020

引言

     Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。我们都知道VUE更多是注重前段用户界面的渲染合操作,但是如果想到实现前后端之间的交互调用后台API,就需要借助其他组件,如今天要讲到的Axios,下边就重点讲解axios在vue中的使用。

     Axios,基于 Promise 的 HTTP 客户端,可以工作于浏览器中,也可以在 node.js 中使用。 

功能:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 中创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防止 XSRF 攻击

1.安装axios

cnpm i axios -S

2.方案一:修改原型链

首先,在main.js中引入

VUE使用axios调用后台API接口的方法

在这个时候,你还是无法在组件中使用axios的,但如果将vue改为vue的原型链,就可以解决这个问题,如下图

VUE使用axios调用后台API接口的方法

3.开始发送请求

VUE使用axios调用后台API接口的方法

VUE使用axios调用后台API接口的方法

5.带参数的请求

如果想要发送带json格式参数的请求,则需要使用qs模块来处理参数

首先在main.js中导入qs模块

VUE使用axios调用后台API接口的方法

然后使用qs处理参数

VUE使用axios调用后台API接口的方法

最终返回结果如下

VUE使用axios调用后台API接口的方法

6.回调函数的简写

VUE使用axios调用后台API接口的方法

7.注意

如果在vue中使用,那么vue中data中的数据无法通过this直接引用,需要做如下处理

VUE使用axios调用后台API接口的方法

以上就是VUE使用axios调用后台API接口的方法的详细内容,更多关于vue调用API接口的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
js canvas实现擦除动画
Jul 16 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 #Javascript
js数组中去除重复值的几种方法
Aug 03 #Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 #Javascript
javascript运行机制之执行顺序理解
Aug 03 #Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 #Javascript
vue实现PC端分辨率适配操作
Aug 03 #Javascript
浅谈JavaScript中的“!!”作用
Aug 03 #Javascript
You might like
escape unescape的php下的实现方法
2007/04/27 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
JS中async/await实现异步调用的方法
2019/08/28 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python Pillow Image Invert
2019/01/22 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
简述数据库的设计过程
2015/06/22 面试题
师范大学应届生求职信
2013/11/21 职场文书
生产副总岗位职责
2013/11/28 职场文书
无故旷工检讨书
2014/01/26 职场文书
六一节目主持词
2014/04/01 职场文书
环保项目建议书
2014/08/26 职场文书
教师个人成长总结
2015/02/11 职场文书
员工安全责任协议书
2016/03/22 职场文书