编程 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的复制网页内容到WORD的实现代码

Feb 16 Javascript

jQuery 取值、赋值的基本方法整理

Mar 31 Javascript

js文件包含的几种方式介绍

Sep 28 Javascript

javascript日期格式化方法小结

Dec 17 Javascript

jQuery 中msgTips 顶部弹窗效果实现代码

Aug 14 jQuery

基于bootstrap写的一点localStorage本地储存

Nov 21 Javascript

react.js组件实现拖拽复制和可排序的示例代码

Aug 20 Javascript

JavaScript 高性能数组去重的方法

Sep 20 Javascript

用原生 JS 实现 innerHTML 功能实例详解

Apr 03 Javascript

vue 中 elment-ui table合并上下两行相同数据单元格

Dec 26 Javascript

vue 动态生成拓扑图的示例

Jan 03 Vue.js

JS removeAttribute()方法实现删除元素的某个属性

Jan 11 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编写的导航条程序

2006/10/09 PHP

NO3第三帝国留言簿制作过程

2006/10/09 PHP

PHP内核介绍及扩展开发指南―基础知识

2011/09/11 PHP

php统计数组元素个数的方法

2015/07/02 PHP

PHP Ajax跨域问题解决方案代码实例

2020/08/01 PHP

JavaScript禁止页面操作的示例代码

2013/12/17 Javascript

window.onload与$(document).ready()的区别分析

2015/05/30 Javascript

JavaScript检测原始值、引用值、属性

2016/06/20 Javascript

jQuery 3.0十大新特性最终版发布

2016/07/14 Javascript

Jquery获取当前城市的天气信息

2016/08/05 Javascript

微信JS接口大全

2016/08/25 Javascript

jstree的简单实例

2016/12/01 Javascript

AngularJS之页面跳转Route实例代码

2017/03/10 Javascript

angular.JS实现网页禁用调试、复制和剪切

2017/03/31 Javascript

js 概率计算(简单版)

2017/09/12 Javascript

JavaScript去掉数组重复项的方法分析【测试可用】

2018/07/19 Javascript

Bootstrap Paginator+PageHelper实现分页效果

2018/12/29 Javascript

vue2.0+vue-router构建一个简单的列表页的示例代码

2019/02/13 Javascript

webpack 代码分离优化快速指北

2019/05/18 Javascript

了解前端理论：rscss和rsjs

2019/05/23 Javascript

javascript-hashchange事件和历史状态管理实例分析

2020/04/18 Javascript

[05:31]干嘛呢兄弟！DOTA2 TI9语音轮盘部分出处

2019/05/14 DOTA

解析Python中的二进制位运算符

2015/05/13 Python

Python实现爬取亚马逊数据并打印出Excel文件操作示例

2019/05/16 Python

获取django框架orm query执行的sql语句实现方法分析

2019/06/20 Python

Python2和Python3中@abstractmethod使用方法

2020/02/04 Python

python实现银行实战系统

2020/02/26 Python

python 删除excel表格重复行,数据预处理操作

2020/07/06 Python

HTML5各种头部meta标签的功能(推荐)

2017/03/13 HTML / CSS

详解如何解决H5开发使用wx.hideMenuItems无效果不生效

2021/01/20 HTML / CSS

JD Sports法国：英国篮球和运动时尚的领导者

2017/09/28 全球购物

美国市场上最实惠的送餐服务：Dinnerly

2018/03/18 全球购物

shallow copy和deep copy的区别

2016/05/09 面试题

教师党的群众路线教育实践活动剖析材料

2014/10/09 职场文书

工作违纪的检讨书范文

2019/07/09 职场文书

Java后端 Dubbo retries 超时重试机制的解决方案

2022/04/14 Java/Android