编程 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温习篇强大的JQuery选择器

Apr 24 Javascript

javascript动态加载二

Aug 22 Javascript

浅谈javascript中createElement事件

Dec 05 Javascript

Jquery实现鼠标移动放大图片功能实例

Mar 25 Javascript

JS根据浏览器窗口大小实时动态改变网页文字大小的方法

Feb 25 Javascript

移动端H5开发 Turn.js实现很棒的翻书效果

Jun 20 Javascript

vue基于Vue2.0和高德地图的地图组件实例

Apr 28 Javascript

微信小程序tabBar底部导航中文注解api详解

Aug 16 Javascript

js正则表达式校验指定字符串的方法

Jul 23 Javascript

Vue2.0点击切换类名改变样式的方法

Aug 22 Javascript

vue webpack开发访问后台接口全局配置的方法

Sep 18 Javascript

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

Dec 25 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人民币金额转大写实例代码

2015/10/02 PHP

浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)

2015/10/26 PHP

PHP设计模式入门之状态模式原理与实现方法分析

2020/04/26 PHP

Apply an AutoFormat to an Excel Spreadsheet

2007/06/12 Javascript

Jquery阻止事件冒泡 event.stopPropagation

2011/12/11 Javascript

js验证电话号码与手机支持+86的正则表达式

2014/01/23 Javascript

new Date()问题在ie8下面的处理方法

2014/07/31 Javascript

jQuery中:has选择器用法实例

2014/12/30 Javascript

jQuery中:checked选择器用法实例

2015/01/04 Javascript

JS+CSS实现电子商务网站导航模板效果代码

2015/09/10 Javascript

jQuery解析Json实例详解

2015/11/24 Javascript

JavaScript正则表达式的分组匹配详解

2016/02/13 Javascript

vue.js 表格分页ajax 异步加载数据

2016/10/18 Javascript

微信公众平台开发教程（五）详解自定义菜单

2016/12/02 Javascript

Nodejs+Socket.io实现通讯实例代码

2017/02/13 NodeJs

全面解析vue中的数据双向绑定

2017/05/10 Javascript

javascript 玩转Date对象(实例讲解)

2017/07/11 Javascript

Bootstrap Table 在指定列中添加下拉框控件并获取所选值

2017/07/31 Javascript

使用Node.js搭建静态资源服务详细教程

2017/08/02 Javascript

JavaScript体验异步更好的解决办法

2018/01/08 Javascript

js实现input密码框显示/隐藏功能

2020/09/10 Javascript

微信小程序一周时间表功能实现

2019/10/17 Javascript

[01:43]倾听DOTA2英雄之声魅惑魔女国服配音鉴赏

2013/06/06 DOTA

在Python的Django框架中包装视图函数

2015/07/20 Python

详解TensorFlow查看ckpt中变量的几种方法

2018/06/19 Python

Python 函数list&read&seek详解

2019/08/28 Python

Django+Uwsgi+Nginx如何实现生产环境部署

2020/07/31 Python

美国地毯购买网站：Rugs USA

2019/02/23 全球购物

C语言面试题

2015/10/30 面试题

财务支持类个人的自我评价

2014/02/14 职场文书

群众路线领导班子四风对照检查材料

2014/09/27 职场文书

高中班主任培训心得体会

2016/01/07 职场文书

导游词之河姆渡遗址博物馆

2019/10/10 职场文书

MySQL性能压力基准测试工具sysbench的使用简介

2021/04/21 MySQL

分析Python list操作为什么会错误

2021/11/17 Python

《群青的幻想曲》京力秋树角色PV公开

2022/04/08 日漫