promise 화살표 함수 처리 비동기 결과

Promise 대상
es6 에 promise 대상 이 추가 되 었 습 니 다. 비동기 메 시 지 를 처리 하기 위해 생 겨 났 습 니 다. 그 전에 비동기 로 받 은 데 이 터 는 리 셋 내장 리 셋 입 니 다. Promise 가 있 으 면 비동기 처리 결 과 를 사용 해 야 하 는 곳 에서 Promise. then (func) 을 호출 할 수 있 습 니 다.
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 의 세 가지 상태.
하나의 Promise 는 다음 과 같은 몇 가지 상태 가 있 습 니 다.

pending: 초기 상태, 성공 이나 실패 상태 가 아 닙 니 다.

fulfilled: 작업 이 성공 적 으로 끝 났 음 을 의미 합 니 다.

rejected: 조작 실 패 를 의미 합 니 다.

설명: Promise 대상 은 프 록 시 대상 (프 록 시 값) 입 니 다. 프 록 시 값 은 Promise 대상 이 만 들 때 알 수 없 을 수 있 습 니 다.비동기 작업 의 성공 과 실 패 를 위해 각각 처리 방법 (handlers) 을 연결 할 수 있 습 니 다.이 는 동기 화 방법 처럼 값 을 되 돌려 줄 수 있 지만 최종 실행 결 과 를 즉시 되 돌려 주 는 것 이 아니 라 미래 에 나타 날 결 과 를 대표 할 수 있 는 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 가 비동기 적 인 결과 에 대해 무엇 을 하 든 비동기 적 이 든 비동기 적 으로 실행 한 결 과 를 전달 하 는 것 은 불가능 하 다. generator 나 async 를 동기 화하 지 않 는 한 분명히 그 를 동기 화 하 는 것 은 수지 가 맞지 않 는 다.다음은 화살표 함수 에 promise 를 넣 는 방법 으로 결과 가 전해 지지 않 는 문 제 를 해결 하 겠 습 니 다.
화살표 함수
ES6 대 법의 화살표 함수, 한 가지 만 말 해 주세요: 화살표 함수 의 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) {
        //        
    });
}