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

js几个不错的函数 $$()

Oct 09 Javascript

jquery利用ajax调用后台方法实例

Aug 23 Javascript

javascript每日必学之多态

Feb 23 Javascript

jQuery实现简单漂亮的Nav导航菜单效果

Mar 29 jQuery

JavaScript数据结构之数组的表示方法示例

Apr 12 Javascript

Vue.js中extend选项和delimiters选项的比较

Jul 17 Javascript

JavaScript阻止表单提交方法（附代码）

Aug 15 Javascript

基于vue-simplemde实现图片拖拽、粘贴功能

Apr 12 Javascript

详解Angular模板引用变量及其作用域

Nov 23 Javascript

vue 左滑删除功能的示例代码

Jan 28 Javascript

VueJS 取得 URL 参数值的方法

Jul 19 Javascript

Vue中实现回车键切换焦点的方法

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下正则来匹配dede模板标签的代码

2010/08/21 PHP

PHP中的常见魔术方法功能作用及用法实例

2015/07/01 PHP

用js实现的抽象CSS圆角效果!!

2007/05/03 Javascript

jQuery 图片切换插件(代码比较少)

2012/05/07 Javascript

setTimeout函数兼容各主流浏览器运行执行效果实例

2013/06/13 Javascript

jquery.ui.draggable中文文档(原文翻译)

2013/11/15 Javascript

js类定义函数时用prototype与不用的区别示例介绍

2014/06/10 Javascript

使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证

2014/09/01 Javascript

JavaScript字符串对象substring方法入门实例（用于截取字符串）

2014/10/17 Javascript

JavaScript中提前声明变量或函数例子

2014/11/12 Javascript

jQuery的deferred对象详解

2014/11/12 Javascript

node.js+Ajax实现获取HTTP服务器返回数据

2014/11/26 Javascript

jquery ui dialog替代confirm实例分析

2016/01/25 Javascript

Node.js操作mysql数据库增删改查

2016/03/30 Javascript

详解在Vue中如何使用axios跨域访问数据

2017/07/07 Javascript

vue中的scope使用详解

2017/10/29 Javascript

JavaScript实现区块链

2018/03/14 Javascript

json对象及数组键值的深度大小写转换问题详解

2018/03/30 Javascript

详解vuex结合localstorage动态监听storage的变化

2018/05/03 Javascript

微信小程序实现简易table表格

2020/06/19 Javascript

Vue全局loading及错误提示的思路与实现

2019/08/09 Javascript

[03:08]TI9战队档案 - Vici Gaming

2019/08/20 DOTA

python通过imaplib模块读取gmail里邮件的方法

2015/05/08 Python

python多线程下信号处理程序示例

2019/05/31 Python

python实现鸢尾花三种聚类算法（K-means,AGNES,DBScan）

2019/06/27 Python

Python Subprocess模块原理及实例

2019/08/26 Python

Pandas将列表（List）转换为数据框（Dataframe）

2020/04/24 Python

python能开发游戏吗

2020/06/11 Python

GWT的应用有哪两种部署模式

2012/12/21 面试题

2015年护士节慰问信

2015/03/23 职场文书

2016春节家属慰问信

2015/03/25 职场文书

2015年行政工作总结范文

2015/04/09 职场文书

2015年教研组工作总结

2015/05/04 职场文书

MongoDB数据库之添删改查

2022/04/26 MongoDB

CSS控制继承中的height能变为可继承吗

2022/06/10 HTML / CSS

一文解答什么是MySQL的回表

2022/08/05 MySQL