プロミスプラス矢印関数は非同期の結果を処理します.

Promiseオブジェクト
ES 6にプロミスオブジェクトが追加されました.非同期メッセージを処理するために発生しました.その前に非同期で取得したデータを処理すると、リカバリーのリカバリーです.Promiseがあれば、非同期処理結果を必要とするところでPromise.thenを呼び出すことができます.
Promise定義
阮一峰ECMAScript 6入門から摘出します.
Promiseとは、簡単に言えば、ある未来が終わるイベント(通常は非同期操作)の結果が格納されています.
jsの中でとても経典の非同期はajax要求です.最初のプロジェクトの中でajax原生要求を使います.ajax要求を処理した結果は全部コールバック関数で行います.状態コードを判断します.対応する処理をします.状態コードの下での処理は非常に多くて、その後は一連の入れ子です.とてもさわやかです.

function getMessage(url,data) {  
var request = new XMLHttpRequest();
request.open("POST", url);    
request.responseType = "json";    
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');    
request.send(data); 
request.onload = function () {
        if (this.status === 200) {            
            if (this.response.code === 200) { 
                this.response.data.forEach(function (obj) {
                    //                        
               })            
            } else                
               //                  
        } else 
          //              
    };   
}

基本的にモジュール全体の操作はコールバックの中で行われます.要求の結果データはそこにあります.非同期の結果は不確定で、コールバック関数で様々な処理ができます.
Promiseの3つの状態
一つのPromiseには以下のような状態があります.

ペンディング:初期状態は成功や失敗の状態ではありません.

fulfilled:操作が成功したことを意味する.

rejeced:操作が失敗したことを意味します.

Promiseオブジェクトは、プロキシオブジェクト(プロキシ値)であり、プロミスオブジェクトの作成時にプロキシされた値は未知である可能性があります.非同期動作の成功と失敗のためにそれぞれの処理方法を結びつけることができます.これは、非同期法のように値を返すことができるが、最終的な実行結果をすぐに返すのではなく、将来の結果を表すことができるpromiseオブジェクトである.
promiseオブジェクトでパッケージ化したajax要求を提供します.

 function getDate(url, data) {
     return new Promise(function(resolve, reject) {
         var request = new XMLHttpRequest(); 
         request.open("POST", url);
         request.responseType = "json"; 
         request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');                    
         request.send(data);                 
         request.onload = function() {                    
             if (this.status === 200) {
                 resolve(this.response);
             } else {    
                 reject(this.status);
             }
         }
    })
}

//           
getDate(url, data).then(function(response) {
    /          
}).catch(function(err){
    //      
})

上記の例はPromiseオブジェクトでajax要求をカプセル化し、すべての結果をフィードバックする気まずさを解決しました.
axiosリクエスト
私達は人工的にカプセル化するのではなく、すでにパッケージされたモジュールaxiosを使って請求してもいいです.原理は同じです.私達自身のパッケージと同じです.

function getDate(url, data) {
    axios.defaults.baseURL = url;  
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
    //      get  ，    data
     axios.get('/articles/articleList').then(function(response) {
         if(response.status == 200) {
             if(response.data.code == 200) {
                  //  
              } else {
                  //            
              }
        }
    }).catch(function(err) {
        //        
    });
}

このPromiseが非同期の結果に対して何をしたかに関わらず、非同期か非同期かを盛大に言いたいです.非同期の結果を伝えたいですか?それとも不可能ですか?次は矢印関数でpromiseの方法で解決します.結果が流れない問題です.
矢印関数
ES 6大法の矢印関数は、矢印関数のthisという点です.矢印関数のthisは外部環境を結合しています.直接例を見ます.

var name = "zhangchi";
var Obj = {
    name: "chichi",
    fun1: function(){
        console.log(this.name);
    },
    fun2: () => {
        console.log(this.name);
    }
}

Obj.fun1(); // chichi
Obj.fun2(); //zhangchi

この例を見たら大体分かります.矢印関数と普通関数のthis方向は違っていますので、一つの種類の中で矢印関数を使わないでください.
最終解決策

var data = {}; //         
function getDate(url, data) {
    axios.defaults.baseURL = url;  
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
     axios.get('/articles/articleList').then((response) => {
         if(response.status == 200) {
             if(response.data.code == 200) {
                  this.data = response.data.data;
              } else {
                  //            
              }
        }
    }).catch(function(err) {
        //        
    });
}