Vue 请求方式详解

举报
SHQ5785 发表于 2023/01/05 08:55:34 2023/01/05
【摘要】 一、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页面引入i...

一、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请求

fetches6新一代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)

       })
}

注意:

  1. fetch返回的是promise对象。所以fetch().then()第一个then里返回的并不是真正的数据。而是一个promise,所以我们需要通过链式操作第二个then()来获取真正的数据。
  2. fetch发送参数是通过body字段来实现的。bodyfetch第二个参数的必选参数之一。params的参数如下
  • method(String): HTTP请求方法,默认为GET;
  • body(String): HTTP的请求参数;
  • headers(Object): HTTP的请求头,默认为{};
  • credentials(String): 默认为omit,忽略的意思,也就是不带cookie;还有两个参数,same-origin,意思就是同源请求带cookieinclude,表示无论跨域还是同源请求都会带cookie
  1. body带的参数是一个序列化以后的字符串。类似 name="coc"&age=30.所以这里我们通过qs库进行序列化。注意通过cdn引入qsqs函数应该是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发送请求可以不用带methodbodyheaders等参数。

五、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。