Js assíncrono e promissor

O conceito de assíncrono

Assíncrono (assíncrono) é um conceito oposto a síncrono (síncrono, sincronizado) .
Na programação tradicional de thread único que estudamos, a execução do programa é síncrona (síncrona não significa que todas as etapas sejam executadas ao mesmo tempo, mas significa que as etapas são executadas sequencialmente em uma sequência de fluxo de controle). O conceito de assíncrono é um conceito que não garante sincronização, ou seja, a execução de um processo assíncrono não terá mais relação sequencial com a sequência original.
O entendimento simples é: a sincronização é executada na ordem do seu código, a execução assíncrona não está na ordem do código e a execução assíncrona é mais eficiente .
O texto acima é uma explicação do conceito de assíncrono. A seguir, vamos explicar o assíncrono de uma forma simples: Assíncrono é lançar um subthread do thread principal para concluir a tarefa.

Quando usar programação assíncrona

Na programação front-end (até mesmo o back-end às vezes é assim), quando lidamos com algumas operações curtas e rápidas, como calcular o resultado de 1 + 1, muitas vezes ela pode ser concluída no thread principal. Como um thread, o thread principal não pode aceitar várias solicitações ao mesmo tempo. Portanto, quando um evento não termina, a interface não será capaz de atender outras solicitações.
Agora existe um botão. Se definirmos seu evento onclick para um loop infinito, quando o botão for pressionado, a página inteira não responderá.
Para evitar que isso aconteça, muitas vezes usamos threads filhos para concluir coisas que podem levar tempo suficiente para serem percebidas pelo usuário, como ler um arquivo grande ou fazer uma solicitação de rede. Como o thread filho é independente do thread principal, mesmo que esteja bloqueado, isso não afetará a operação do thread principal. Mas o subthread tem uma limitação: uma vez iniciado, ele perderá a sincronização com o thread principal. Não podemos determinar seu fim. Se precisarmos processar algo após o final, como processar informações do servidor, não podemos mesclar coloque-o no tópico principal. Entre.
Para resolver esse problema, as funções de operação assíncrona em JavaScript geralmente usam funções de retorno de chamada para processar os resultados de tarefas assíncronas.

Os métodos de programação assíncrona comumente usados ​​em JS incluem o seguinte:

1. Função de retorno de chamada : o uso da função de retorno de chamada nos permite realizar operações correspondentes após a conclusão da operação assíncrona.

function fetchData(callback) {
    
    
  // 模拟异步操作
  setTimeout(function() {
    
    
    const data = '这是从服务器获取的数据';
    callback(data);
  }, 2000);
}

// 调用 fetchData 函数，并传入回调函数来处理获取的数据
fetchData(function(data) {
    
    
  console.log(data); // 输出：这是从服务器获取的数据
});

2. async/await : async/await é um recurso de linguagem introduzido no ES8 para simplificar o uso do Promise.

function fetchData() {
    
    
  return new Promise(function(resolve, reject) {
    
    
    // 模拟异步操作
    setTimeout(function() {
    
    
      const data = '这是从服务器获取的数据';
      resolve(data);
    }, 2000);
  });
}

// 使用async/await来处理异步操作
async function getData() {
    
    
  try {
    
    
    const data = await fetchData();
    console.log(data); // 输出：这是从服务器获取的数据
  } catch (error) {
    
    
    console.error(error);
  }
}

getData();

3. Promessa : Promessa é um objeto introduzido no ES6 para gerenciar operações assíncronas.

function fetchData() {
    
    
  return new Promise(function(resolve, reject) {
    
    
    // 模拟异步操作
    setTimeout(function() {
    
    
      const data = '这是从服务器获取的数据';
      resolve(data);
    }, 2000);
  });
}

// 使用Promise的then方法来处理异步操作的结果
fetchData().then(function(data) {
    
    
  console.log(data); // 输出：这是从服务器获取的数据
});

A promessa foi mencionada acima, vamos falar sobre a promessa abaixo

JavaScript 中 Promessa

Conceitos básicos de promessa:

Promise é um objeto usado para lidar com operações assíncronas e fornece uma maneira mais estruturada e legível de gerenciar e organizar código assíncrono. Um objeto Promise representa uma operação que ainda não foi concluída, mas que eventualmente será concluída, e retorna um resultado ou mensagem de erro após a conclusão da operação.

Construir Promessa

new Promise(function (resolve, reject) {
    
    
    // 要做的事情...
});

Construtor de Promessa

O construtor Promise é o construtor integrado em JavaScript usado para criar objetos Promise.
O construtor Promise aceita uma função como parâmetro. Esta função é síncrona e será executada imediatamente, por isso a chamamos de função inicial. A função inicial contém dois parâmetros, resolução e rejeição, indicando o status de sucesso e falha da Promessa, respectivamente.
Quando a função inicial for executada com sucesso, ela deverá chamar a função de resolução e passar o resultado bem-sucedido. Quando a função inicial falha, ela deve chamar a função de rejeição e passar o motivo da falha.

Um objeto Promise pode ter os três estados a seguir:

1. Pendente (em andamento) : Estado inicial, indicando que a operação assíncrona ainda não foi concluída.

2. Cumprido : indica que a operação assíncrona foi concluída com êxito e retornou um valor como resultado.

3. Rejeitado : Indica que a operação assíncrona falhou e um objeto de erro é retornado como motivo da rejeição.

O objeto Promise possui os seguintes métodos importantes:

1. then(): usado para processar os resultados de operações assíncronas. Vários métodos then() podem ser chamados em uma cadeia. Cada método then() recebe o resultado da operação anterior como parâmetro e retorna um novo objeto Promise para a próxima etapa de processamento.

2. catch(): usado para tratar erros em operações assíncronas. Quando a operação anterior lança uma exceção ou a promessa é rejeitada, o método catch() irá capturar o erro e executar a lógica de processamento correspondente.

3. finalmente(): O método finalmente() será executado independentemente de o objeto Promise ser cumprido ou rejeitado. Geralmente usado para liberar recursos ou realizar operações de limpeza.

function fetchData() {
    
    
  return new Promise(function(resolve, reject) {
    
    
    // 异步操作
    setTimeout(function() {
    
    
      const data = '这是从服务器获取的数据';
      resolve(data); // 异步操作成功，调用resolve()方法
      // reject(new Error('获取数据失败')); // 异步操作失败，调用reject()方法
    }, 2000);
  });
}

// 使用Promise的then()方法处理异步操作的结果
fetchData()
  .then(function(data) {
    
    
    console.log(data); // 输出：这是从服务器获取的数据
  })
  .catch(function(error) {
    
    
    console.error(error); // 输出错误信息
  })
  .finally(function() {
    
    
    console.log('操作完成'); // 无论成功或失败，最终都会执行该函数
  });

No exemplo acima, a função fetchData retorna um objeto Promise. Especifique a lógica de processamento quando a operação for bem-sucedida chamando o método then() e especifique a lógica de processamento quando a operação falhar chamando o método catch(). O método finalmente() será executado após a execução da Promessa, independentemente do sucesso ou falha.

As promessas fornecem melhor fluxo de controle e mecanismos de tratamento de erros, tornando o código assíncrono mais fácil de entender, manter e estender .

Cenários de uso promissores

1. Solicitação AJAX : ao fazer uma solicitação AJAX, você pode usar o Promise para lidar com operações assíncronas e obter os dados de resposta do servidor. O Promise pode gerenciar melhor o sucesso e o fracasso das solicitações e tratá-las de acordo.

2. Carregamento de arquivos : No desenvolvimento front-end, muitas vezes é necessário carregar arquivos externos, como imagens, arquivos CSS, arquivos JavaScript, etc. O Promise pode ser usado para gerenciar operações assíncronas durante o carregamento do arquivo para garantir que o arquivo seja carregado com êxito antes das operações subsequentes.

3. Dependências de múltiplas operações assíncronas : Às vezes, há múltiplas operações assíncronas e o resultado de uma operação depende da conclusão de outra operação. O Promise pode lidar com essa dependência por meio de chamadas em cadeia, tornando o código mais claro e legível.

4. Execute várias operações assíncronas em paralelo : em alguns casos, precisamos executar várias operações assíncronas independentes ao mesmo tempo e esperar que todas sejam concluídas antes de continuar com o processamento subsequente. Promise fornece o método Promise.all() para executar várias operações assíncronas em paralelo e retornar resultados após todas serem concluídas.

5. Controle de timeout de tarefas assíncronas : Às vezes é necessário controlar o timeout de tarefas assíncronas, ou seja, se uma tarefa assíncrona não for concluída após um determinado tempo, ela será interrompida e processada adequadamente. Promise pode obter controle de tempo limite combinando os métodos setTimeout e Promise.race().

6. Operações de banco de dados : Ao realizar consultas de banco de dados ou interagir com o back-end, muitas vezes é necessário usar o Promise para lidar com operações assíncronas, a fim de gerenciar melhor os resultados e exceções das operações de banco de dados.

Resumindo, seja no desenvolvimento front-end ou back-end, desde que estejam envolvidas operações assíncronas, você pode considerar o uso do Promise para fornecer uma maneira mais elegante e confiável de escrever código.

Vantagens e desvantagens das promessas

vantagem

1. Código assíncrono mais claro : o Promise fornece uma maneira estruturada de organizar e processar código assíncrono, tornando-o mais legível, fácil de entender e manter. Através de chamadas em cadeia, múltiplas operações assíncronas podem ser conectadas para formar um processo de execução claro.

2. Melhor mecanismo de tratamento de erros : o Promise pode lidar uniformemente com erros de operação assíncrona por meio do método catch(), evitando o problema do inferno de retorno de chamada que ocorre facilmente nas funções de retorno de chamada tradicionais. O tratamento de erros é mais centralizado e controlável, melhorando a robustez e a confiabilidade do código.

3. Suporta operações paralelas e seriais : o Promise pode implementar várias operações assíncronas em paralelo por meio do método Promise.all() e esperar que todas elas sejam concluídas antes de processar os resultados. Ao mesmo tempo, você também pode implementar a execução serial de operações assíncronas concatenando vários métodos then() para facilitar o gerenciamento de dependências entre operações assíncronas.

4. Fornece extensões funcionais mais ricas : além do processamento básico de operações assíncronas, o Promise também fornece alguns métodos comumente usados, como finalmente(), race(), etc., que podem atingir mais requisitos funcionais em operações assíncronas, como liberação de recursos. controle de tempo limite, etc.

5. Totalmente integrado com a sintaxe JavaScript moderna : Promise faz parte da especificação ES6 e está intimamente integrado com outras sintaxes JavaScript modernas (como funções de seta, async/await). Isso torna o uso do Promises mais conveniente e também oferece mais opções para programação assíncrona.

deficiência

1. A curva de aprendizado é acentuada : em comparação com o método tradicional de função de retorno de chamada, o Promise introduz alguns novos conceitos e métodos de uso, que exigem que os alunos aprendam e se adaptem. Os iniciantes podem precisar de algum tempo para entender como as promessas funcionam e como usá-las corretamente.

2. Cancelamento não suportado : depois que uma promessa é criada, ela não pode cancelar ou interromper a operação assíncrona que está sendo executada. Embora efeitos semelhantes possam ser alcançados através de algumas técnicas, não existe um padrão oficial de suporte, o que pode causar alguma confusão.

3. Não suportado por todos os navegadores : Embora o Promise seja um padrão ES6, ele pode não ser totalmente compatível com alguns navegadores mais antigos. Para compatibilidade, pode ser necessário usar polyfill ou ferramentas de conversão (como Babel) para conversão.

Resumindo, o Promise, como modo e ferramenta para lidar com operações assíncronas, apresenta vantagens óbvias na maioria dos casos, mas também é necessário estar atento ao seu escopo de aplicação e algumas limitações. No uso real, você pode escolher se deseja usar o Promise e como usá-lo de acordo com necessidades específicas e requisitos do projeto.