A programação síncrona geralmente é fácil de depurar e manter, no entanto, a programação assíncrona geralmente fornece melhor desempenho e maior flexibilidade. A maior característica do assíncrono é que não há necessidade de esperar. "Promessas" gradualmente se tornou a parte mais importante do JavaScript, e um grande número de novas APIs começou a implementar o princípio da promessa. Vamos dar uma olhada no que é a promessa e sua API e uso!
Promete status
A API xmlHttPrequest é assíncrona, mas não usa a API da promessa. Mas existem muitas APIs nativas de JavaScript que usam promessas:
*API da bateria
*buscar API (um substituto para XHR)
*ServiceWorker API
As promessas só se tornarão mais populares e comuns no futuro, e é muito importante que todos os desenvolvedores de front-end o usem. Outra coisa que vale a pena notar é que o Node.js é uma plataforma baseada em promessas (é óbvio que a promessa é um recurso essencial).
O uso de promessas é mais simples do que você pensa - se você costumava usar o setTimeout para controlar tarefas assíncronas!
Uso básico de promessa
O novo construtor Promise () pode ser usado em tarefas assíncronas tradicionais, assim como o uso anterior do Settimeout e XmlHttPrequest. Uma nova promessa é gerada usando a nova palavra -chave. Ao mesmo tempo, esta promessa fornece funções de resolução e rejeição para nos permitir executar operações de retorno de chamada:
var p = nova promessa (função (resolver, rejeitar) {// faça uma tarefa assíncrona tarefa assíncrona e então ... if (/ * boa condição */) {resolve ('sucesso!');} else {rejeit ('falha!');}}); p.then (function) {/ * fazer algo com o resultado */}).Os programadores podem chamar manualmente a resolução e rejeição de funções dentro da função de retorno de chamada de acordo com a situação de execução. Aqui está um exemplo mais realista que converte uma chamada xmlHttPrequest para uma tarefa baseada em promessas:
// De promessas e de volta de Jake Archibald: // http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promising-xmlhttprequestfunção get (url) {// Retorne uma nova promessa. retornar nova promessa (function (resolver, rejeitar) {// faça o uso usual xhr var req = novo xmlHttPrequest (); req.open ('get', url); req.onload = functus () {// isso é chamado mesmo em 404 etc // verifique o status if (req.status == 200) { } else {//, caso contrário, rejeite o texto de status // que será um erro significativo (Erro (req.statustext)); {console.log ("Sucesso!", Resposta);}, function (erro) {console.error ("falhou!", erro);});Promise.Resolve () e Promise.Reject () podem ser chamados diretamente. Às vezes, quando determinamos que a promessa não precisa ser executada, não precisamos usar o novo para criar um objeto de promessa, mas podemos chamar diretamente de promessa.resolve () e promey.reject (). por exemplo:
var userCache = {}; function getUserDetail (nome de usuário) {// em ambos os casos, em cache ou não, uma promessa será devolvida se (userCache [nome de usuário]) {// retornar uma promessa sem a "nova" palavra -chave "prometa.resolve (userCache [username]); } // Use a API busca para obter as informações // Fetch retorna uma promessa Return Fetch ('Users/' + Nome de usuário + '.json') .Then (function (resultado) {userCache [nome de usuário] = resultado; return resultado;}) .catch (function () {throw novo erro ('não poderia encontrar o usuário:' + username);Como a promessa definitivamente retornará, podemos usar os métodos então e capturar para lidar com o valor de retorno!
Então método
Todas as instâncias de objeto prometidas têm um método então, usado para interagir com essa promessa. Primeiro, o método então chamará a função resolve () por padrão:
nova promessa (função (resolver, rejeitar) {// uma ação assíncrona simulada usando setTimeout Settimeout (function () {resolve (10);}, 3000);}). Então (function (resultado) {console.log (resultado);}); // do consolo: // 10Em seguida, o tempo de acionamento da ação de retorno de chamada é que a promessa é executada. Também podemos executar operações de retorno de chamada concatenadas o método então:
nova promessa (função (resolver, rejeitar) {// uma ação assíncrona simulada usando o setTimeout Settimeout (function () {resolve (10);}, 3000);}). Então (function (num) {console.log ('primeiro depois:', num); retornar num * 2;}). então (num) {(consoll }). Então (function (num) {console.log ('Último então:', num);}); // do console: // primeiro depois: 10 // Segundo depois: 20 // Último depois: 40Você descobrirá que cada uma das chamadas aceitará o valor de devolução do anterior e depois chamará como um parâmetro.
Se uma promessa foi executada e o single for chamado novamente, a ação de retorno de chamada será executada novamente. Se a função de retorno de chamada rejeitada for executada nesta promessa e o método então for chamado, a função de retorno de chamada não será executada.
método de captura
Pegue quando uma promessa for rejeitada (rejeitada), o método de captura será executado:
nova promessa (function (resolve, rejeitar) {// uma ação simulada assíncrona usando setTimeout Settimeout (function () {reject ('done!');}, 3000);}). Feito!'Normalmente, lidamos com o resultado da falha de execução no método de rejeição e executamos o resultado da exceção na captura:
rejeitar (error ('dados não puderam ser encontrados'));
Método Promise.All
Muitas vezes, existe um cenário quando chamamos de forma assíncrona: precisamos chamar várias operações assíncronas ao mesmo tempo, mas esperamos que apenas realizemos a operação de resposta após a conclusão de todas as operações - esse é o papel da promessa. O método Promise.All pode receber várias promessas como parâmetros, na forma de uma matriz, e a função de retorno de chamada será chamada depois que todas essas promessas forem executadas com sucesso.
Prometo.all ([promessa1, promessa2]). Então (function (resultados) {// Ambas as promessas resolvidas}). Catch (function (error) {// Uma ou mais promessas foi rejeitada});Um bom exemplo de uso do Promise.All é executar várias chamadas de operações de Ajax (via busca):
var request1 = fetch ('/users.json'); var request2 = fetch ('/artles.json'); promessa.all ([request1, request2]).Também podemos realizar uma mistura de APIs de busca e estado da bateria, porque todos retornam promessas:
Promise.all ([fetch ('/users.json'), Navigator.getBattery ()]). Então (function (resultados) {// ambos promessas feitas!});Depois que a função de rejeição é chamada na promessa, a execução é rejeitada e não pode ser concluída normalmente, a situação será um pouco complicada. Depois que a promessa for rejeitada, o método de captura capturará a primeira função de rejeição executada:
var req1 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { resolve('First!'); }, 4000);});var req2 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { reject('Second!'); }, 3000);}); Promise.All ([Req1, req2]). Então (function (resultados) {console.log ('então:', um);}). Catch (function (err) {console.log ('Catch:', err);}); // do console: // catch: segundo!Promise.Tall é uma interface muito importante e desempenhará um papel importante em muitas APIs de promessas recém -nascidas.
Promise.Race
Promise.Race é uma função interessante - não espera que todas as promessas sejam resolvidas ou rejeitadas, mas em todas as promessas, ele disparará enquanto uma execução terminar:
var req1 = nova promessa (função (resolve, rejeição) {// Uma ação assíncrona simulada usando o setTimeout Settimeout (function () {resolve ('primeiro!');}, 8000);}); var req2 = new Promise (function (resolve, reject) {// uma ação simulada usen usettimeoutoutTime (function (function) {reject) {// uma resolução de ação simulada usando o setTimeoutout (function (function) {reject) {// uma resolução de ação de mocking (functtio) (function) (function) (function) (function) (resolver); 3000);}); promessa.RACE ([req1, req2]). Então (function (um) {console.log ('então:', um);}). Catch (function (um, dois) {console.log ('Catch:', um);}); // do console: // então: segundo!Um cenário útil é baixar recursos de vários servidores espelhados. Quando um retornar, os outros retornos não são processados.
Aprenda a usar promessas
As promessas têm sido um tópico muito quente nos últimos anos, e até foi retirado do JavaScript para se tornar uma arquitetura de idiomas. Acredito que em breve veremos cada vez mais APIs JavaScript que usarão padrões baseados em promessas.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.