Promise programação assíncrona

uso A. Promise

1. Promise uso básico

função instanciado objeto de transferência construtor promessa, a função para o processamento de tarefas assíncronas

e rejeitar a resolver dois parâmetros para o processamento dos sucessos e fracassos em ambos os casos, e obtenção de processamento de resultados por p.then

Quando uma chamada em seguida, ele só pode lidar com a função normal, não uma função de circunstâncias incomuns de entrada, que fica apenas a casos de tratamento bem sucedidos

 / *   
   Nós usamos o novo construtor para construir uma Promise Promise receber um parâmetro é uma função e passar dois parâmetros: 
   Resolve, Rejeitar, respectivamente, após o retorno de chamada função de retorno e operações assíncronas realizada após a implementação bem sucedida da operação assíncrona falhou     * / var P = new new Promise ( função (resolve, Rejeitar) {
       // 2. tarefas aqui assíncronas de execução do setTimeout 
      o setTimeout ( função () {
         var Em Flag = false ;
         IF (Bandeira IN) {
           // 3. normalmente 
          resolve ( 'Olá' ); 
       } else {
           // 4. anormalidade 
          Rejeitar ( 'errado' ); 
        } 
      } 100
    ); 
    }); 
    //   . Posterior 5 Promise geração exemplo, e pode especificar o estado resolveu rejeitar estado pelo método de retorno, em seguida, 
    //   no processo, em seguida, você não pode retornar diretamente objeto de dados Promise, então a parte de trás do pode receber os dados 
    p.then ( função (de dados) {
     // obter o resultado normal a partir Resolve 
      o console.log (dados) 
    }, função (info) { 
     // obter uma mensagem de erro do Rejeitar 
     o console.log (info) 
    });

/ * 
      Pedidos com base Promise Ajax 
    * / 
    funcionar o queryData (URL) {
       var P = new new Promise ( função (Resolve, Rejeitar) {
         var XHR = new new o XMLHttpRequest (); 
        xhr.onreadystatechange = função () {
           IF (xhr.readyState! . = 4) de retorno ;
           IF (xhr.readyState == == 200 é xhr.status && 4. ) {
             // onde o processamento normal 
            Resolver (xhr.responseText); 
          } else {
             // excepções punho
            rejeitar ( 'Erro de servidor' ); 
          } 
        }; 
        xhr.open ( 'GET' , URL); 
        xhr.send ( nulo ); 
      }); 
      retorno P; 
    } 
    // circunstâncias normais 
    // o queryData ( 'http: // localhost : 3000 / dados ') 
    //    .then (função (de dados) { 
    //      o console.log (dados); 
    //    }, função (Informação) { 
    //      o console.log (Informação) 
    //    }); 
    // = =========================== 
    // enviar uma pluralidade de pedidos e para garantir que a ordem ajax 
    //Se o valor de retorno, em seguida, um retorno é um objeto normal. O próximo cadeia, em seguida, o argumento é este objetos comuns, o chamador é então criado automaticamente objetos promessa de reclamações de garantias acorrentado 
　  // se o retorno é uma promessa de retorno do objeto, então o próximo, em seguida, é processado em um o método então retorna objeto prometer 
    o queryData ( 'http: // localhost: 3000 / Data' ) 
      .then ( função (Data) { 
        o console.log (Data) 
        voltar a queryData ( 'http: // localhost: 3000 / DATAl' ) ; 
      }) 
      .then ( função (Data) { 
        o console.log (Data); 
        voltar a queryData ( 'http: // localhost: 3000 / DATA2' ); 
      }) 
      .then ( função (Data) { 
        o console.log (Data) 
      });

2. Além disso a anormalidade nas então passados duas funções, também pode ser alterado para .catch negócio, o mesmo efeito

　　função foo () {
       retornar  novo novo Promise ( função (Resolve, Rejeitar) { 
        o setTimeout ( função () {
           // Resolve (123); 
          Rejeitar ( 'error' ); 
        }, 100 ); 
      }) 
    } 
    foo () 
      .then ( função (Data) {
        // obter o resultado correto da tarefa assíncrona 
        o console.log (Data) 
      }) 
      . a captura ( função (Data) {
        // obter a informação anormalidade 
        o console.log (Data) 
      }) 
      .a, finalmente, ( função () {
        // sucesso será executado (não um padrão oficial) 
        o console.log ( 'Terminado' ) 
      });

3. Métodos de objeto Promise comuns

função do queryData (URL) {
       retornar  novo novo (Promise função (Resolve, Rejeitar) {
         var XHR = new new o XMLHttpRequest (); 
        xhr.onreadystatechange = função () {
           SE !. (= xhr.readyState 4) retorno ;
           IF (= xhr.readyState == 200 é xhr.status 4 && =. ) {
             // pega circunstâncias normais 
            Resolve (xhr.responseText); 
          } else {
             // exceções punho 
            Rejeitar ( 'erro de servidor' ); 
          } 
        };
        xhr.open ( 'GET' , URL); 
        xhr.send ( nulo ); 
      }); 
    } 

    var P1 = o queryData ( 'http: // localhost: 3000 / A1' );
     var P2 = a queryData ( 'http: // localhost: 3000 / A2 ' );
     var P3 = o queryData (' http: // localhost: 3000 / A3 ' ); 

    // todos os meios todos executados com sucesso de forma assíncrona 
    //   parâmetros de todo o [p1, p2, p3] e retorno os resultados correspondem resultado é uma matriz [ "OlÁ tom", "OlÁ Jerry", "OlÁ o pico"] 
    // Promise.all ([P1, P2, P3])., em seguida, o (função (resultado) { 
    //    o console.log (o resultado) 
    // }) 

    // um dos mais rápida da corrida assíncrona executada com êxito, independentemente do outro 
    //Desde a execução p1 mais rápido, promessa do então () Os resultados obtidos 'P1'. P2, P3 continuou a executar, mas os resultados serão descartados. 
    Promise.race ([P1, P2, P3]). O então ( função (Resultado) { 
      a console.log (Resultado) 
    })

Dois. Fetch Uso Interface (com o servidor para obter interagem, Post)

Três. Uso Axios Interface (com o servidor para obter interagem, Post)

1. Esta necessidade interface para importar arquivos js correspondentes

Four. Async / aguardam permitem olhar código assíncrono, se comportam mais como código de sincronização

1. Palavras-chave aguardam só podem ser usados em funções definidas usando assíncrono

2. aguardam atrás exemplo directa de um objecto com uma promessa

3. Qualquer função assíncrona retornará uma promessa implícita de que podemos usar, em seguida, ser programa acorrentado

4. Depois da corrente acrescentou aguardam aguardam o resultado será realizada mais tarde depois de voltar de código

    assíncrono função queryData () {
       var ret = aguardam nova Promise ( função (determinação, rejeitar) { 
        setTimeout ( função () { 
          determinação ( 'nihao' ) 
        }, 1000 ); 
      }) 
      // console.log (ret.data) 
      retorno ret; 
    } 
    QueryData ()., Em seguida, ( função (dados) { 
      console.log (dados) 
    })