vue 发送ajax请求-白红宇

vue 发送ajax请求

阅读量：5090 次

发布时间：2019-06-13

本文共 2038 字，大约阅读时间需要 6 分钟。

一、简介

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

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

　　3、参考：GitHub上搜索axios，查看API文档

二、使用axios发送AJAX请求

　　1、安装axios并引入

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

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

　　　　 3、通过script src的方式进行文件的引入

　　2、发送get请求

　　　　1、基本使用格式

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

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

　　　　2、传参方式：

　　通过url传参

　通过params选项传参

　　　　3、案例：

    
           发送AJAX请求

　　3、发送post请求（push,delete的非get方式的请求都一样）

　　　　1、基本使用格式

　　　　　　格式：axios.post(url,data,[options]);

　　　　2、传参方式

　　　　　　1、自己拼接为键值对

　　　　　　2、使用transformRequest，在请求发送前将请求数据进行转换

　　　　　　3、如果使用模块化开发，可以使用qs模块进行转换

　　　　　　4、注释：axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参

　　　　3、案例：

    
           发送AJAX请求

　　4、发送跨域请求

　　 1、须知：axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库

　　　　2、使用vue-resource发送跨域请求

　　　　3、安装vue-resource并引入

　　　　　　　npm info vue-resource #查看vue-resource 版本信息

　　　　　　 cnpm install vue-resource -S #等同于cnpm install vue-resource -save

　　　　4、基本使用方法（使用this.$http发送请求）

　　　　　　 this.$http.get(url, [options])

　　　　　　 this.$http.head(url, [options])

　　　　　　 this.$http.delete(url, [options])

　　　　　　this.$http.jsonp(url, [options])

　　　　　　 this.$http.post(url, [body], [options])

　　　　　　this.$http.put(url, [body], [options])

　　　　　　this.$http.patch(url, [body], [options])

　　　　5、案例

转载于:https://www.cnblogs.com/gluncle/p/9382069.html

你可能感兴趣的文章