使用axios/vue-resource发送http请求

一、发送AJAX请求

    1、简介

    vue本身不支持发送ajax请求，需要axios、vue-resource等插件实现

    axios 是基于promise的http请求客户端，用来发送请求，也是vue 2.0官方推荐的，同时不在对vue-resource进行更新和维护

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

    2、使用axios发送ajax请求

        2.1 安装axios并引入

npm install axios -S

            也可以直接下载axios.min.js

        2.2 基本用法

        axios([options])
        axios.get(url,[options]);

            传参：
                a.通过url的方式传参
                b.通过params传参：params:{name:"",age:""}

        axios.post(url,data,[options]);
            axios默认发送数据时，数据格式是Request Payload,并为我们常用的Form Data形式
            所以参数必须以键值对的形式传递，不能以json形式传参
            传参方式：
                a.参数1=值1&参数2=值2
                b.使用transformRequest，在请求发送前将请求数据进行转换

 axios.post('serve.php',{name:"",age:''},{
　　　　transformRequest:[
　　　　　　function(data){
　　　　　　　　let params='';
　　　　　　　　for(let index in data){
　　　　　　　　　　params+=index+'='+data[index]+'&';　　
　　　　　　　　}
              return params;
　　　　　　}
　　　　]
　　})

                c.如果使用模块化开发，可以使用qs模块进行转化
        axios 本身并不支持发送跨域的请求，没有提供相应的API，作者也暂时没有计划在axios添加发送跨域请求，所以只能使用第三方库

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

        3.1 安装vue-resource

cnpm install vue-resource -S

        3.2 基本用法

            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])

转载于:https://www.cnblogs.com/yuezhen/p/10407723.html