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

posted @ 2019-02-20 17:00  玥甄  阅读(656)  评论(0编辑  收藏  举报