编程 Javascript

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接口的方法

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接口的资料请关注三水点靠木其它相关文章！

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

- Author -

zsq_fengchen

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript setTimeout()传递函数参数(包括传递对象参数)

Apr 07 Javascript

onkeydown事件解决按回车键直接提交数据的需求

Apr 11 Javascript

parentElement,srcElement的使用小结

Jan 13 Javascript

JS实现网页Div层Clone拖拽效果

Sep 26 Javascript

JS加载器如何动态加载外部js文件

May 26 Javascript

JavaScript事件用法浅析

Oct 31 Javascript

详解angularjs获取元素以及angular.element()用法

Jul 25 Javascript

js+canvas实现简单扫雷小游戏

Jan 22 Javascript

ES6使用新特性Proxy实现的数据绑定功能实例

May 11 Javascript

解决vue addRoutes不生效问题

Aug 04 Javascript

vue实现几秒后跳转新页面代码

Sep 09 Javascript

微信小程序实现列表左右滑动

Nov 19 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

比特率，大家看看这个就不用收音机音质去比MP3音质了

2021/03/01 无线电

实例(Smarty+FCKeditor新闻系统)

2007/01/02 PHP

PHP语言中global和$GLOBALS[]的分析之二

2012/02/02 PHP

PHP实现显示照片exif信息的方法

2014/07/11 PHP

分享自定义的几个PHP功能函数

2015/04/15 PHP

在云虚拟主机部署thinkphp5项目的步骤详解

2017/12/21 PHP

PHP大文件分片上传的实现方法

2018/10/28 PHP

PHP实现八皇后算法

2019/05/06 PHP

让Firefox支持event对象实现代码

2009/11/07 Javascript

js页面滚动时层智能浮动定位实现(jQuery/MooTools)

2011/08/23 Javascript

JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集

2015/09/28 Javascript

javascript高级选择器querySelector和querySelectorAll全面解析

2016/04/07 Javascript

浅谈键盘上回车按钮的js触发事件

2017/02/13 Javascript

基于nodejs+express4.X实现文件下载的实例代码

2017/07/13 NodeJs

快速理解 JavaScript 中的 LHS 和 RHS 查询的用法

2017/08/24 Javascript

js实现点击按钮复制文本功能

2020/07/20 Javascript

微信小程序实现点赞、取消点赞功能

2018/11/02 Javascript

vue-cli 目录结构详细讲解总结

2019/01/15 Javascript

vue elementUI 表单嵌套验证的实例代码

2019/11/06 Javascript

纯js+css实现在线时钟

2020/08/18 Javascript

简单说明Python中的装饰器的用法

2015/04/24 Python

详解Python中的文件操作

2016/08/28 Python

python 禁止函数修改列表的实现方法

2017/08/03 Python

简单实现python数独游戏

2018/03/30 Python

Python学习笔记之While循环用法分析

2019/08/14 Python

Python编写memcached启动脚本代码实例

2020/08/14 Python

美国最顶级的精品店之一：Hampden Clothing

2016/12/22 全球购物

Skyscanner台湾：全球知名的旅行比价引擎

2018/07/01 全球购物

ghd法国官方网站：英国最受欢迎的美发工具品牌

2019/04/18 全球购物

陈安之励志演讲稿

2014/08/21 职场文书

教师三严三实学习心得体会

2014/10/11 职场文书

群众路线四风对照检查材料

2014/11/04 职场文书

检讨书格式

2015/01/23 职场文书

三八妇女节寄语

2015/02/27 职场文书

幸福来敲门观后感

2015/06/04 职场文书

小学生作文写作技巧100例，非常实用！

2019/07/08 职场文书