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

DOM和XMLHttpRequest对象的属性和方法整理

Jan 04 Javascript

JS在可编辑的div中的光标位置插入内容的方法

Nov 20 Javascript

Node.js抓取中文网页乱码问题和解决方法

Feb 10 Javascript

jQuery插件zoom实现图片全屏放大弹出层特效

Apr 15 Javascript

jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)

Aug 23 Javascript

JS 根据子网掩码，网关计算出所有IP地址范围示例

Apr 23 Javascript

JavaScript实现前端实时搜索功能

Mar 26 Javascript

详解Angular的8个主要构造块

Jun 20 Javascript

JS设计模式之命令模式概念与用法分析

Feb 06 Javascript

layui获取多选框中的值方法

Aug 15 Javascript

LayUI动态设置checkbox不显示的解决方法

Sep 02 Javascript

TypeScript 运行时类型检查补充工具

Sep 28 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处理数据库数据如何将数据返回客户端并显示当前状态

2016/02/16 PHP

phpMyAdmin通过密码漏洞留后门文件

2018/11/20 PHP

PHP的mysqli_sqlstate()函数讲解

2019/01/23 PHP

Laravel中9个不经常用的小技巧汇总

2019/04/16 PHP

YII框架行为behaviors用法示例

2019/04/26 PHP

在Javascript中为String对象添加trim,ltrim,rtrim方法

2006/09/22 Javascript

javascript replace方法与正则表达式

2008/02/19 Javascript

获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

2011/02/14 Javascript

JQuery异步加载无限下拉框级联功能实现示例

2014/02/19 Javascript

JavaScript中的关联数组问题

2015/03/04 Javascript

JavaScript将一个数组插入到另一个数组的方法

2015/03/19 Javascript

基于JavaScript实现移动端点击图片查看大图点击大图隐藏

2015/11/04 Javascript

javascript设计简单的秒表计时器

2020/09/05 Javascript

全面总结Javascript对数组对象的各种操作

2017/01/22 Javascript

jquery编写日期选择器

2017/03/16 Javascript

ES6新特性七：数组的扩充详解

2017/04/21 Javascript

Vue.js实例方法之生命周期详解

2017/07/03 Javascript

Mint UI 基于 Vue.js 移动端组件库

2017/11/07 Javascript

Layui给数据表格动态添加一行并跳转到添加行所在页的方法

2018/08/20 Javascript

微信小程序云函数添加数据到数据库的方法

2020/03/04 Javascript

Python抓取框架 Scrapy的架构

2016/08/12 Python

利用Python爬取微博数据生成词云图片实例代码

2017/08/31 Python

python中的随机函数random的用法示例

2018/01/27 Python

python中返回矩阵的行列方法

2018/04/04 Python

浅谈pandas中shift和diff函数关系

2018/04/08 Python

python 实现判断ip连通性的方法总结

2018/04/22 Python

Python3.5多进程原理与用法实例分析

2019/04/05 Python

使用python实现简单五子棋游戏

2019/06/18 Python

余弦相似性计算及python代码实现过程解析

2019/09/18 Python

HTML5本地数据库基础操作详解

2016/04/26 HTML / CSS

简历中求职的个人自我评价

2013/12/03 职场文书

美发活动策划书

2014/01/14 职场文书

单位实习工作证明怎么写

2014/11/02 职场文书

关于迟到的检讨书

2015/05/06 职场文书

2015年入党积极分子培养考察意见

2015/08/12 职场文书

《极主夫道》真人电影正式预告定档6月3日上映

2022/04/05 日漫