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

利用WebBrowser彻底解决Web打印问题（包括后台打印）

Jun 22 Javascript

判断用户的在线状态 onbeforeunload事件

Mar 05 Javascript

javascript实现tabs选项卡切换效果(自写原生js)

Mar 19 Javascript

js控制不同的时间段显示不同的css样式的实例代码

Nov 04 Javascript

一个简单的Node.js异步操作管理器分享

Apr 29 Javascript

JS+CSS实现六级网站导航主菜单效果

Sep 28 Javascript

修复jQuery tablesorter无法正确排序的bug(加千分位数字后)

Mar 30 Javascript

基于jquery实现表格内容筛选功能实例解析

May 09 Javascript

jQuery创建及操作xml格式数据示例

May 26 jQuery

微信小程序常见页面跳转操作简单示例

May 01 Javascript

JS绘图Flot如何实现可选显示曲线图功能

Oct 16 Javascript

JavaScript 生成唯一ID的几种方式

Feb 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

PHP基础学习小结

2011/04/17 PHP

php中session与cookie的比较

2015/01/27 PHP

PHP发送短信代码分享

2015/08/11 PHP

PHP设置images目录不充许http访问的方法

2016/11/01 PHP

php.ini中date.timezone设置详解

2016/11/20 PHP

PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC

2020/02/16 PHP

模仿jQuery each函数的链式调用

2009/07/22 Javascript

JavaScript 拾漏补遗

2009/12/27 Javascript

jquery选择器(常用选择器说明)

2010/09/28 Javascript

JavaScript获取/更改文本框的值的实例代码

2013/08/02 Javascript

ECMAScript5中的对象存取器属性：getter和setter介绍

2014/12/08 Javascript

深入学习JavaScript中的原型prototype

2015/08/13 Javascript

jQuery CSS3相结合实现时钟插件

2016/01/08 Javascript

vue写一个组件

2018/04/09 Javascript

element上传组件循环引用及简单时间倒计时的实现

2018/10/01 Javascript

elementUI select组件使用及注意事项详解

2019/05/29 Javascript

详解javascript void(0)

2020/07/13 Javascript

[02:07]TI9显影之尘系列 - Vici Gaming

2019/08/20 DOTA

python在命令行下使用google翻译(带语音)

2014/01/16 Python

在Python中使用SimpleParse模块进行解析的教程

2015/04/11 Python

Python编程中装饰器的使用示例解析

2016/06/20 Python

Zabbix实现微信报警功能

2016/10/09 Python

Python实现TCP通信的示例代码

2019/09/09 Python

python KNN算法实现鸢尾花数据集分类

2019/10/24 Python

python用TensorFlow做图像识别的实现

2020/04/21 Python

Python约瑟夫生者死者小游戏实例讲解

2021/01/04 Python

CSS3 please 跨浏览器的CSS3产生器

2010/03/14 HTML / CSS

高考自主招生自荐信

2013/10/20 职场文书

竞选班干部演讲稿

2014/04/24 职场文书

小学生田径运动会广播稿

2014/09/11 职场文书

毕业生银行实习自我鉴定

2014/10/14 职场文书

2014年工人工作总结

2014/11/25 职场文书

fastdfs+nginx集群搭建的实现

2021/03/31 Servers

详解Python描述符的工作原理

2021/06/11 Python

简单聊聊Golang中defer预计算参数

2022/03/25 Golang

Redis超详细讲解高可用主从复制基础与哨兵模式方案

2022/04/07 Redis