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

jqGrid jQuery 表格插件测试代码

Aug 23 Javascript

js中cookie的添加、取值、删除示例代码

Oct 21 Javascript

JavaScript中的object转换函数toString()与valueOf()介绍

Dec 31 Javascript

jQuery子属性过滤选择器用法分析

Feb 10 Javascript

jQuery validate插件submitHandler提交导致死循环解决方法

Jan 21 Javascript

安装使用Mongoose配合Node.js操作MongoDB的基础教程

Mar 01 Javascript

JavaScript中的this使用详解

Jul 27 Javascript

jQuery获取select选中的option的value值实现方法

Aug 29 Javascript

jquery实现超简单的瀑布流布局【推荐】

Mar 08 Javascript

vue和react等项目中更简单的实现展开收起更多等效果示例

Feb 22 Javascript

webpack里使用jquery.mCustomScrollbar插件的方法

May 30 jQuery

vue2.0实现列表数据增加和删除

Jun 17 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实时显示输出

2008/10/02 PHP

twig模板获取全局变量的方法

2016/02/05 PHP

PHP页面输出时js设置input框的选中值

2016/09/30 PHP

php + WebUploader实现图片批量上传功能

2019/05/06 PHP

javascript实现在光标处插入指定内容

2007/05/25 Javascript

需要做特殊处理的DOM元素属性的访问

2010/11/05 Javascript

JQuery插件iScroll实现下拉刷新，滚动翻页特效

2014/06/22 Javascript

JavaScript简介

2015/02/15 Javascript

JQuery操作元素的css样式

2015/03/09 Javascript

js游戏人物上下左右跑步效果代码分享

2015/08/28 Javascript

Nodejs的express使用教程

2015/11/23 NodeJs

nodeJs爬虫获取数据简单实现代码

2016/03/29 NodeJs

浅析JavaScript中var that=this

2017/02/17 Javascript

基于jQuery实现文字打印动态效果

2017/04/21 jQuery

详解axios在node.js中的post使用

2017/04/27 Javascript

vue中阻止click事件冒泡,防止触发另一个事件的方法

2018/02/08 Javascript

详解redis在nodejs中的应用

2018/05/02 NodeJs

Hadoop中的Python框架的使用指南

2015/04/22 Python

简单解析Django框架中的表单验证

2015/07/17 Python

python看某个模块的版本方法

2018/10/16 Python

通过python实现随机交换礼物程序详解

2019/07/10 Python

HTML的form表单和django的form表单

2019/07/25 Python

在PyCharm的 Terminal（终端）切换Python版本的方法

2019/08/02 Python

Pycharm最常用的快捷键及使用技巧

2020/03/05 Python

Anaconda+VSCode配置tensorflow开发环境的教程详解

2020/03/30 Python

Python调用飞书发送消息的示例

2020/11/10 Python

基础的CSS3弹性盒Flexbox布局使用实例

2016/04/08 HTML / CSS

BASIC HOUSE官方旗舰店：韩国著名的服装品牌

2018/09/27 全球购物

英国钻石公司：British Diamond Company

2020/02/16 全球购物

学校十一活动方案

2014/02/01 职场文书

田径运动会开幕式及主持词

2014/03/28 职场文书

文明礼貌演讲稿

2014/05/12 职场文书

庆元旦演讲稿

2014/09/15 职场文书

员工自我评价范文

2015/03/11 职场文书

2015教师个人工作总结范文

2015/03/31 职场文书

幼儿园家长工作总结2015

2015/04/25 职场文书