编程 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实现的水平和垂直居中的div窗口

Aug 08 Javascript

vue.js学习笔记:如何加载本地json文件

Jan 17 Javascript

js实现HTML中Select二级联动的实例

Jan 05 Javascript

解决Vue不能检测数组或对象变动的问题

Feb 24 Javascript

vue-cli脚手架config目录下index.js配置文件的方法

Mar 13 Javascript

微信小程序websocket实现即时聊天功能

May 21 Javascript

Node.js中console.log()输出彩色字体的方法示例

Dec 01 Javascript

详谈vue中router-link和传统a链接的区别

Jul 22 Javascript

js将日期格式转换为YYYY-MM-DD HH:MM:SS

Sep 18 Javascript

jQuery实现本地存储

Dec 22 jQuery

vue 计算属性和侦听器的使用小结

Jan 25 Vue.js

使用Ajax实现进度条的绘制

Apr 07 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获取POST数据的三种方法实例详解

2016/12/20 PHP

PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结

2019/05/06 PHP

海量经典的jQuery插件集合

2010/01/12 Javascript

有道JavaScript监听浏览器的问题

2010/06/23 Javascript

js+html+css实现鼠标移动div实例

2013/01/30 Javascript

js获取UserControl内容为拼html时提供方便

2014/11/02 Javascript

JavaScript中的依赖注入详解

2015/03/18 Javascript

require.js 加载 vue组件 r.js 合并压缩的实例

2016/10/14 Javascript

vue多级多选菜单组件开发

2020/09/08 Javascript

使用BootStrap进行轮播图的制作

2017/01/06 Javascript

AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析

2017/01/19 Javascript

用nodeJS搭建本地文件服务器的几种方法小结

2017/03/16 NodeJs

webpack公共组件引用路径简化小技巧

2018/06/15 Javascript

vue awesome swiper异步加载数据出现的bug问题

2018/07/03 Javascript

微信小程序使用for循环动态渲染页面操作示例

2018/12/25 Javascript

js中的深浅拷贝问题简析

2019/05/10 Javascript

如何使用RoughViz可视化Vue.js中的草绘图表

2021/01/30 Vue.js

[01:12]（回顾）DOTA2国际邀请赛，全世界DOTAer的盛宴

2014/07/01 DOTA

[00:32]2016完美“圣”典风云人物：Maybe宣传片

2016/12/05 DOTA

[38:21]2018DOTA2亚洲邀请赛3月30日小组赛A组 LGD VS Newbee

2018/03/31 DOTA

[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21

2018/08/22 DOTA

python实现html转ubb代码(html2ubb)

2014/07/03 Python

Python的SimpleHTTPServer模块用处及使用方法简介

2018/01/22 Python

Python3多线程操作简单示例

2018/05/22 Python

python实现电脑自动关机

2018/06/20 Python

对python中Json与object转化的方法详解

2018/12/31 Python

Python把对应格式的csv文件转换成字典类型存储脚本的方法

2019/02/12 Python

keras中模型训练class_weight,sample_weight区别说明

2020/05/23 Python

Python中的__init__作用是什么

2020/06/09 Python

IE浏览器单独写CSS样式的几种方法

2014/10/14 HTML / CSS

医校毕业生自我鉴定

2014/01/25 职场文书

2014年党风廉政建设工作总结

2014/11/19 职场文书

逃课检讨书

2015/01/26 职场文书

刑事附带民事起诉状

2015/05/19 职场文书

听证会主持词

2015/07/03 职场文书

MySQL下载安装配置详细教程附下载资源

2022/09/23 MySQL