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

jQuery遍历对象、数组、集合实例

Nov 08 Javascript

Javascript window对象详解

Nov 12 Javascript

基于Angularjs实现分页功能

May 30 Javascript

jQuery Validate插件实现表单验证

Aug 19 Javascript

微信小程序在Chrome浏览器上运行以及WebStorm的使用

Sep 27 Javascript

AngularJS封装指令方法详解

Dec 12 Javascript

jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】

Apr 02 jQuery

微信小程序注册60s倒计时功能使用JS实现注册60s倒计时功能

Aug 16 Javascript

原生javascript实现的全屏滚动功能示例

Sep 19 Javascript

jQuery Validate插件ajax方式验证输入值的实例

Dec 21 jQuery

Js中将Long转换成日期格式的实现方法

Jun 05 Javascript

在移动端使用vue-router和keep-alive的方法示例

Dec 02 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

雄兵连三大错觉：凯莎没了，凉冰阵亡了，华烨觉得自己又行了

2020/04/09 国漫

IIS下配置Php+Mysql+zend的图文教程

2006/12/08 PHP

php中的boolean(布尔)类型详解

2013/10/28 PHP

ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法

2014/08/08 PHP

浅析php工厂模式

2014/11/25 PHP

dedecms集成财付通支付接口

2014/12/28 PHP

thinkPHP5 ACL用户权限模块用法详解

2017/05/10 PHP

用jscript实现新建word文档

2007/06/15 Javascript

js表数据排序 sort table data

2009/02/18 Javascript

JavaScript 事件记录使用说明

2009/10/20 Javascript

让firefox支持IE的一些方法的javascript扩展函数代码

2010/01/02 Javascript

jQuery实现点击文本框弹出热门标签的提示效果

2013/11/17 Javascript

jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

2014/06/09 Javascript

node.js下when.js 的异步编程实践

2014/12/03 Javascript

JavaScript设计模式之外观模式介绍

2014/12/28 Javascript

JavaScript取得WEB安全颜色列表的方法

2015/07/14 Javascript

JS实现自动变换的菜单效果代码

2015/09/09 Javascript

解析js如何获取css样式

2016/12/11 Javascript

Vue.js+Layer表格数据绑定与实现更新的实例

2018/03/07 Javascript

详解Require.js与Sea.js的区别

2018/08/05 Javascript

使用element-ui的el-menu导航选中后刷新页面保持当前选中状态

2019/07/19 Javascript

vue实现一拉到底的滑动验证

2019/07/25 Javascript

浅谈layer的Icon样式以及一些常用的layer窗口使用方法

2019/09/11 Javascript

[14:56]教你分分钟做大人：巫医

2014/10/30 DOTA

Python中的匿名函数使用简介

2015/04/27 Python

详解详解Python中writelines()方法的使用

2015/05/25 Python

Python3 xml.etree.ElementTree支持的XPath语法详解

2020/03/06 Python

Python xlrd excel文件操作代码实例

2020/03/10 Python

关于PyCharm安装后修改路径名称使其可重新打开的问题

2020/10/20 Python

印度和世界各地的精美产品：Ikka Dukka

2018/02/12 全球购物

中专生职业生涯规划书范文

2013/12/29 职场文书

关于廉洁的广播稿

2014/01/30 职场文书

技术经济专业求职信

2014/09/03 职场文书

社区党的群众路线教育实践活动总结材料

2014/10/31 职场文书

2015年青年志愿者工作总结

2015/05/20 职场文书

晶体管来复再生式二管收音机

2021/04/22 无线电