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

让回调函数 showResponse 也带上参数的代码

Aug 13 Javascript

JavaScript 设计模式学习 Factory

Jul 29 Javascript

使用javascript获取flash加载的百分比的实现代码

May 25 Javascript

jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)

Jan 23 Javascript

js获取 type=radio 值的方法

May 09 Javascript

jQuery表格插件datatables用法详解

Nov 23 Javascript

jQuery使用中可能被XSS攻击的一些危险环节提醒

May 24 Javascript

jQuery Dom元素操作技巧

Feb 04 jQuery

使用elementUI实现将图片上传到本地的示例

Sep 04 Javascript

解决ng-repeat产生的ng-model中取不到值的问题

Oct 02 Javascript

JS实现判断移动端PC端功能

Feb 21 Javascript

Nuxt.js nuxt-link与router-link的区别说明

Nov 06 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

Search Engine Friendly的URL设计

2006/10/09 PHP

php如何调用webservice应用介绍

2012/11/24 PHP

Ajax 数据请求的简单分析

2011/04/05 Javascript

javascript实现多栏闭合展开式广告位菜单效果实例

2015/08/05 Javascript

JavaScript获取当前cpu使用率的方法

2015/12/15 Javascript

Node.js程序中的本地文件操作用法小结

2016/03/06 Javascript

获取input标签的所有属性的方法

2016/06/28 Javascript

高效Web开发的10个jQuery代码片段

2016/07/22 Javascript

xcode中获取js文件的路径方法(推荐)

2016/11/05 Javascript

浅谈Node.js爬虫之网页请求模块

2018/01/11 Javascript

vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

2018/09/07 Javascript

react native 原生模块桥接的简单说明小结

2019/02/26 Javascript

AutoJs实现刷宝短视频的思路详解

2020/05/22 Javascript

关于javascript中的promise的用法和注意事项(推荐)

2021/01/15 Javascript

浅谈Python单向链表的实现

2015/12/24 Python

python itchat实现微信好友头像拼接图的示例代码

2017/08/14 Python

解决python使用open打开文件中文乱码的问题

2017/12/29 Python

Python实现去除列表中重复元素的方法小结【4种方法】

2018/04/27 Python

Python图像处理库PIL中图像格式转换的实现

2020/02/26 Python

python 利用matplotlib在3D空间绘制二次抛物面的案例

2021/02/06 Python

深入解读CSS3中transform变换模型的渲染

2016/05/27 HTML / CSS

纯CSS实现聊天框小尖角、气泡效果

2014/04/04 HTML / CSS

css3动画效果小结(推荐)

2016/07/25 HTML / CSS

html5使用canvas绘制一张图片

2014/12/15 HTML / CSS

工程部主管岗位职责

2013/11/17 职场文书

外语专业毕业生个人的自荐信

2013/11/19 职场文书

银行门卫岗位职责

2013/12/29 职场文书

学生打架检讨书1000字

2014/01/16 职场文书

物控部经理职务说明书

2014/02/25 职场文书

幼儿园教师自我鉴定

2014/03/20 职场文书

计算机网络及管理学专业求职信

2014/06/05 职场文书

摄影专业毕业生求职信

2014/08/05 职场文书

软环境建设心得体会

2014/09/09 职场文书

机关干部三严三实心得体会

2014/10/13 职场文书

python基于OpenCV模板匹配识别图片中的数字

2021/03/31 Python

使用CSS自定义属性实现骨架屏效果

2022/06/21 HTML / CSS