Vue 进阶（二十）：请求方式详解

关注

发布于: 1 小时前

一、resource 请求

npm install vue-resource --save import VueResource from 'vue-resource'Vue.use(VueResource)this.$http.get("")

复制代码

二、axios 请求

npm install axios --save axios.defaults.baseURL = "根地址"//vue页面引入import axios from 'axios'axios.get(请求的地址)

复制代码

三、axios 请求（原型方式）

cnpm install axios --save Vue.prototype.http = axios //配置Vue原型this.http.get("")

复制代码

四、fetch 请求

fetch是es6新一代XMLHttpRequest的请求方式。无需安装其他库。可以在浏览器中直接提供其提供的api轻松与后台进行数据交互。

基本用法：

fetch（url，{parmas}）  .then(res=>        return res.json()  //返回promise对象   )  .then(data=>{    return data     //返回真正数据  })  .catch(err=>{   throw new Error(err)  })

复制代码

4.1 get 方式

<script type="text/javascript">
   window.onload=function(){
     var url="http://www.baidu.com"  //填写自己的域名地址     var btn=document.getElementById("btn");
     var data={        verified:1,         warningLevel:0,        sessionID:"3ecf8905a98cb752b127302bf08f08e5"     }
  btn.onclick=function(){
    fetch(url+"/stats/getUserList?sessionID=3ecf8905a98cb752b127302bf08f08e5&verified=1&warningLevel=0").then(res=>    {             return res.json();     //返回promise对象
             }).then(data=>{
                  console.log("返回值：",data)
              }).catch(err=>{
                   console.log(err)
              })
}

复制代码

4.2 POST 方式

btn.onclick=function(){                 fetch(url+"/stats/getUserList",{         method:"POST",         headers:{           'Content-Type': 'application/x-www-form-urlencoded'         },         body:Qs.stringify(data)       }).then(res=>{
           console.log(res)            return res.json();
       }).then(data=>{
           console.log("返回值：",data)
       }).catch(err=>{
           console.log(err)
       })}

复制代码

注意：

fetch返回的是promise对象。所以fetch().then()第一个then里返回的并不是真正的数据。而是一个promise，所以我们需要通过链式操作第二个then()来获取真正的数据。
fetch发送参数是通过body字段来实现的。body是fetch第二个参数的必选参数之一。params的参数如下

method(String): HTTP 请求方法，默认为GET;
body(String): HTTP 的请求参数;
headers(Object): HTTP 的请求头，默认为{};
credentials(String): 默认为omit,忽略的意思，也就是不带cookie;还有两个参数，same-origin，意思就是同源请求带cookie；include,表示无论跨域还是同源请求都会带cookie。

body带的参数是一个序列化以后的字符串。类似 name="coc"&age=30.所以这里我们通过qs库进行序列化。注意通过cdn引入qs后qs函数应该是Qs,Qs.stringify(data)。

4.3 在 vue 中的应用

fetch支持在vue中使用。这样通过ajax请求就无需通过安装axios依赖库来实现。

具体使用：

4.3.1 组件中发送请求

<div style="margin-top:20px">   <button @click="getLevelData" >获取用户信息</button></div>
export default{  name:"users",  data(){      return{         arr:[]      }  },
methods:{  getLevelData(){    async function getInfo(){       return  await fetch(api+"/stats/getUserList",{          method:"post",          headers:{              'Content-Type':"application/x-www-form-urlencoded"           },           body:qs.stringify(data)         }).then(res=>res.json())      }           getInfo().then(res=>{          this.arr=res.data.data       })       .catch(err=>{          console.log("get--error:",err)       })   } }

复制代码

4.3.2 表单通过 fetch 发送 ajax 请求

<p>手机号：<input type="text" v-model="mobile"></p><p>密码:<input type="password" v-model="password"></p><input type="button" value="登录" @click="go">     <script>  export default {      name:"Login2",   data(){     return{         mobile:"",         password:"",     }   },   methods:{     go(){      var data={        mobile:this.mobile,        password:this.password      }     getLevelData(){       async function getInfo(){         return await fetch(api+"/stats/getUserList",{              method:"post",              headers:{                  'Content-Type':"application/x-www-form-urlencoded"               },               body:qs.stringify(data)          }).then(res=>res.json())        }      getInfo().then(res=>{           this.arr=res.data.data        }).catch(err=>{              console.log("get--error:",err)        })      }    }  } }     </script>

复制代码

注意：如果是提交表单元素，那么一定要添加headers参数，而且content-Type的值必须是application/x-www-form-urlencoded。

heders:{    'Content-Type':"application/x-www-form-urlencoded"},

复制代码

4.3.3 通过 vuex 请求数据

 export default {   name:"Login2",   data(){     return{       mobile:"",         password:"",       val:""     }   },   methods:{    go(){     var data={          mobile:this.mobile,          password:this.password     }     this.$store.dispatch("login",data).then(res=>{         this.arr=res.data.data     }).catch(err=>{         console.log("登录；err",err)     })    }   } }

复制代码

store.js 中对应的action:

login({commit},payload){     return new Promise((resolve,reject)=>{        fetch("/account/login",payload).then(res=>{            resolve(res)        }).catch(err=>{            console.log("登录--err:",err)            reject(err)        })     })  },

复制代码

通过vuex实现请求，fetch发送请求可以不用带method，body和headers等参数。

五、拓展阅读

《Vue进阶（幺捌伍）：应用 qs 插件实现参数格式化》

发布于: 1 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/c605875b7a23182142660363e】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（二十）： 请求方式详解

一、resource 请求

二、axios 请求

三、axios 请求（原型方式）

四、fetch 请求

4.1 get 方式

4.2 POST 方式

4.3 在 vue 中的应用

4.3.1 组件中发送请求

4.3.2 表单通过 fetch 发送 ajax 请求

4.3.3 通过 vuex 请求数据

五、拓展阅读

No Silver Bullet

评论

Vue 进阶（二十）：请求方式详解