Vueステップアップ(20):Vueでのリクエスト方式

1.resourceリクエスト

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

2.axiosリクエスト

cnpm install axios --save 
axios.defaults.baseURL = "   "
//vue    import axios from 'axios'
axios.get(     )

3.axiosリクエスト

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

4.fetch("")/es 6のリクエスト方式fetchは、次世代XMLHttpRequestの代替案です.他のライブラリをインストールする必要はありません.ブラウザで直接提供されるapiは、バックグラウンドとデータのインタラクションを容易に行うことができます.
基本的な使い方:

fetch（url，{parmas}）.then(res=>
      return res.json()  //  promise  
 ).then(data=>{
  return data     //      
}).catch(err=>{
 throw new Error(err)
})

に付随
(1)get方式:
注:フォーム要素をコミットする場合は、headersパラメータを追加する必要があります.content-Typeの値はアプリケーション/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などのパラメータを持たなくてもよい