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

曾经终败给现在 2021-09-30 00:36 322阅读 0赞

一、发送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