vueでのaxiosの使用

本人もvueのプロジェクトをたくさんやっていて、まだaxiosのvueでの使い方を正式に書いていないようですが、今日はまとめてみましょう
1.vueにaxiosを導入する
まず依存をダウンロードして、それからコードを追加することができます.

import Vue from 'vue'
import axios from 'axios';
import Qs from 'qs';//   axios  json        key value   
Vue.prototype.$Qs = Qs;//this.$Qs.stringify(params);
Vue.prototype.$cookie = VueCookie;

導入後、vueでthis.$http.get(),this.$http.post()などの関数axiosの公式ドキュメントアドレスを下に使用できます.

https://www.kancloud.cn/yunye/axios/234845

まず一般的な使い方を見てみましょう
getリクエスト

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

postリクエスト

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

ポイント来ました---ノートを持ってきてください–私はもっと良い書き方があります–見て後悔しないことを保証します
みんなES 7のasync awaitを知っているでしょう、このような良いものは私のために使うことができなくてとても残念で、自身のaxiosはpromiseに基づいてカプセル化して、ちょうどこのasync awaitにぴったり合って、だから、私达は完全にthen関数を书く必要はありません私は直接コードに行きましょう、関系を売りません

async getNewsList(){
            let last = await this.$http.get('/static/json/    -   .json');
            if(last.data.success){
                console.log(last.data)
                this.newsList = last.data.result;
                this.total = last.data.total;
                this.newsList.forEach((value,index) =>{
                    if(value.abstract.length > 116){
                        value.abstract = value.abstract.slice(0,117) + '...';
                    }
                })
            }else{
                this.newsList = [];
            }
        },

どうですか.まるで同期コードを書くのと同じではないでしょうか.まだ返事を書く必要はありません.ははは!注意しなければならないのは、async awaitは組み合わせて使用しなければならないので、asyncを関数の前に書いて、awaitはあなたのajax要求の場所に書いて、awaitを書かないと間違って報告して、それから1つの変数を使って、私のここはlastで受け取って、あなたの論理を処理することができて、とても不思議ではありませんか?もしあなたがvue-cliで構築したプロジェクトを使って、同時にbabel-polyfillを配置したら、あなたは大胆にこのasync awaitを使いましょう.
ES 6の新しい特性async awaitを用いて非同期処理を行う
三兄の微信の公衆番号、あなたの微信を開けて、それをスキャンして、それから私を連れて行きます!三哥QQ交流群