编程 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 相关文章推荐

精解window.setTimeout()&window.setInterval()使用方式与参数传递问题！

Nov 23 Javascript

js下用层来实现select的title提示属性

Feb 23 Javascript

js左侧三级菜单导航实例代码

Sep 13 Javascript

JS将表单导出成EXCEL的实例代码

Nov 11 Javascript

JQuery实现鼠标移动图片显示描述层的方法

Jun 25 Javascript

CSS图片响应式垂直水平居中

Aug 14 Javascript

AngularJS实现根据变量改变动态加载模板的方法

Nov 04 Javascript

基于ajax与msmq技术的消息推送功能实现代码

Dec 26 Javascript

微信小程序引入es6 promise

Apr 12 Javascript

vue使用vue-i18n实现国际化的实现代码

Apr 08 Javascript

layer弹出层父子页面事件相互调用方法

Aug 17 Javascript

微信小程序仿淘宝热搜词在搜索框中轮播功能

Jan 21 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

php中存储用户ID和密码到mysql数据库的方法

2013/02/06 PHP

一个简单且很好用的php分页类

2013/10/26 PHP

PHP向浏览器输出内容的4个函数总结

2014/11/17 PHP

PHP登录（ajax提交数据和后台校验）实例分享

2016/12/29 PHP

CL vs ForZe BO5 第五场 2.13

2021/03/10 DOTA

js no-repeat写法背景不重复

2009/03/18 Javascript

javascript instanceof,typeof的区别

2010/03/24 Javascript

深入理解JQuery keyUp和keyDown的区别

2013/12/12 Javascript

js中不同的height, top的区别对比

2015/09/24 Javascript

jQuery数据类型小结(14个)

2016/01/08 Javascript

jQuery操作DOM_动力节点Java学院整理

2017/07/04 jQuery

JS中type="button"和type="submit"的区别

2017/07/04 Javascript

老生常谈Bootstrap媒体对象

2017/07/06 Javascript

vue2实现搜索结果中的搜索关键字高亮的代码

2018/08/29 Javascript

详解Node.js 中使用 ECDSA 签名遇到的坑

2018/11/26 Javascript

layui复选框限制选择个数的方法

2019/09/18 Javascript

Vue快速实现通用表单验证功能

2019/12/05 Javascript

vue中watch和computed为什么能监听到数据的改变以及不同之处

2019/12/27 Javascript

如何利用nodejs自动定时发送邮件提醒（超实用）

2020/12/01 NodeJs

[01:46]TI4西雅图DOTA2前线报道中国选手抱团调时差

2014/07/08 DOTA

[36:19]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs LGD

2018/04/03 DOTA

Python基于DES算法加密解密实例

2015/06/03 Python

python获取指定字符串中重复模式最高的字符串方法

2018/06/29 Python

python一键去抖音视频水印工具

2018/09/14 Python

pandas 把数据写入txt文件每行固定写入一定数量的值方法

2018/12/28 Python

python自动发微信监控报警

2019/09/06 Python

Django视图扩展类知识点详解

2019/10/25 Python

520使用Python实现“我爱你”表白

2020/05/20 Python

python中数字是否为可变类型

2020/07/08 Python

美国当红的名品折扣网：Gilt Groupe

2016/08/15 全球购物

如何处理简单的PHP错误

2015/10/14 面试题

IT工程师岗位职责

2014/07/04 职场文书

医院党的群众路线教育实践活动领导班子对照检查材料

2014/09/25 职场文书

高中生期中考试失利检讨书

2014/10/23 职场文书

优秀小学生事迹材料

2014/12/26 职场文书

小学生交通安全寄语

2015/02/27 职场文书