fetch函数以及在vue中的应用

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

基本用法:

1 fetch(url,{parmas}).then(res=>

      return res.json()  //返回promise对象

 ).then(data=>{

  return data     //返回真正数据

}).catch(err=>{

 throw new Error(err)

})

------------------------------------------------------------------------------------------------------------------

(1) get 方式:

  

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

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

(2)通过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,javascript)