vue axios 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字段来实现的。body是fetch第二个参数的必选参数之一。params的参数如下

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

3. 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等参数。