编程 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 prototype 原型链

Mar 12 Javascript

js loading加载效果实现代码

Nov 24 Javascript

基于javascript实现判断移动终端浏览器版本信息

Dec 09 Javascript

Javascript 拖拽雏形中的一些问题(逐行分析代码，让你轻松了拖拽的原理)

Jan 23 Javascript

多个jQuery版本共存的处理方案

Mar 17 Javascript

jQuery CSS3相结合实现时钟插件

Jan 08 Javascript

JS获取鼠标相对位置的方法

Sep 20 Javascript

vue项目中引入vue-datepicker插件的详解

May 14 Javascript

JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析

May 22 Javascript

js中火星坐标、百度坐标、WGS84坐标转换实现方法示例

Mar 02 Javascript

Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

May 26 Javascript

VUE和Antv G6实现在线拓扑图编辑操作

Oct 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

为什么那些咖啡爱好者大多看不上连锁咖啡店？

2021/03/06 咖啡文化

php+MySQL判断update语句是否执行成功的方法

2014/08/28 PHP

CI框架简单分页类用法示例

2020/06/06 PHP

Firefox下无法正常显示年份的解决方法

2014/09/04 Javascript

jQuery+CSS3实现3D立方体旋转效果

2015/11/10 Javascript

Nodejs Express4.x开发框架随手笔记

2015/11/23 NodeJs

AngularJS 与Bootstrap实现表格分页实例代码

2016/10/14 Javascript

jQuery 获取select选中值及清除选中状态

2016/12/13 Javascript

JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

2017/02/19 Javascript

Vue.js 2.0 移动端拍照压缩图片预览及上传实例

2017/04/27 Javascript

Vue实现选择城市功能

2017/05/27 Javascript

jQuery动画_动力节点节点Java学院整理

2017/07/04 jQuery

尝试自己动手用react来写一个分页组件(小结)

2018/02/09 Javascript

详解react-redux插件入门

2018/04/19 Javascript

javascript中toFixed()四舍五入使用方法详解

2018/09/28 Javascript

vue+webpack中配置ESLint

2018/11/07 Javascript

微信小程序实现多选删除列表数据功能示例

2019/01/15 Javascript

微信小程序wxs实现吸顶效果

2020/01/08 Javascript

原生js实现移动小球（碰撞检测）

2020/12/17 Javascript

让python的Cookie.py模块支持冒号做key的方法

2010/12/28 Python

python代码实现ID3决策树算法

2017/12/20 Python

python编程实现12306的一个小爬虫实例

2017/12/27 Python

Python之pandas读写文件乱码的解决方法

2018/04/20 Python

python 实现将多条曲线画在一幅图上的方法

2019/07/07 Python

将自己的数据集制作成TFRecord格式教程

2020/02/17 Python

django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例

2020/05/12 Python

关于Python3爬虫利器Appium的安装步骤

2020/07/29 Python

python自动化测试三部曲之request+django实现接口测试

2020/10/07 Python

HTML5 标准将把互联网视频扔回到黑暗时代

2010/02/10 HTML / CSS

通信工程毕业生自荐信

2013/11/01 职场文书

行政总经理岗位职责

2013/12/05 职场文书

小学生五年级大队长竞选发言稿

2014/09/12 职场文书

武侯祠导游词

2015/02/04 职场文书

终止解除劳动合同证明书

2015/06/17 职场文书

小学生纪律委员竞选稿

2015/11/19 职场文书

2016年村干部公开承诺书（公开承诺事项）

2016/03/25 职场文书