vue发送ajax请求详解

时间：2021-05-26

vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现

axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护

本文为大家介绍vue使用axios发送AJAX请求

首页安装并引入axios

1、npm install axios -S #直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中

2、网上直接下载axios.min.js文件

3、通过script src的方式进行文件的引入<script src="js/axios.min.js"></script>

axios基本使用方法

发送get请求

1、基本使用格式

格式1：axios([options])#这种格式直接将所有数据写在options里，options其实是个字典

格式2：axios.get(url[,options]);

2、传参方式：

通过url传参

通过params选项传参

下面我们来看一个vue发送ajax get请求实例代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发送AJAX请求</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> <script> window.onload=function(){ new Vue({ el:'#itany', data:{ user:{ name:'alice', age:19 }, }, methods:{ send(){ axios({ method:'get', url:'http:///5a1Fazu8AA54nxGko9WTAnF6hhy/su', {params:{wd:'a'}, jsonp:'cb', //百度使用的jsonp参数名为cb，所以需要修改,默认使用的是callbakc参数就不用修改 }).then(function (resp) { console.log(resp.data) }).catch(function (err) { console.log(err) }) } } })</script></html>

Vue作为一个没有入侵性的框架并不限制你使用ajax框架

使用了Vue后，ajax部分你可以做如下选择：

1.使用JS原生XHR接口

2.引入JQuery或者Zepto 使用$.ajax();

3.Vue的github上提供了vue-resource插件 ：

4.使用 fetch.js

5.自己封装一个ajax库

至于哪种方式适合自己的项目大家可以自行选择

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章