This is my 17th day of the August Challenge. Check out the August Challenge for more details

preface

We should step on the Promise is what, what is the meaning of its existence, why it is designed so, after understanding, we can learn more, such as the principle of Promise, or from the application level, we should master the use of Promise skills. Today we’re going to talk about the meaning of promises. Take a look at the following two questions, do you know:

  • Why do Promise constructors execute synchronously, including the actuators inside them?
  • Why does something like promise.then have to be asynchronous, and why can’t it be synchronous?

Use AJAX to implement asynchronous programs

Suppose you have data.json and store some data

[{"id": 1."name": "zhangsan"
  },
  {
    "id": 2."name": "lisi"
  },
  {
    "id": 3."name": "wangwu"}]Copy the code

Index.js to get data through Ajax and do related processing:

$.ajax({
  url: 'http://localhost:3000/data.json'.success(data) {
    console.log(getNames(data)); }});console.log('Dream Chasers');

function getNames(data) {
  return data.map(function(item) {
    returnitem.name; })}Copy the code

The code above prints the result, and since Ajax is asynchronous, it prints “dream chasers” first.

Logic is pulled out of AJAX

Console. log(getNames(data)); Pull it out of AJAX

Let’s try it first:

var data = $.ajax({
  url: 'http://localhost:3000/data.json'.async: false
});

console.log(getNames(data.responseJSON));

console.log('Dream Chasers');

function getNames(data) {
  return data.map(function(item) {
    returnitem.name; })}Copy the code

Async: false async: false async: false async: false Actually, no.

They are asynchronous programs, but because you set async: false, they block. In plain English, the ajax program above synchronizes with each statement below.

This is obviously not what we want, and while we’ve taken the getNames logic out of AJAX, we actually make console.log(‘ Dreamers ‘); Blocked by ajax programs, forming a synchronous relationship. We couldn’t solve this problem with the original Ajax, and Promise was born.

Promise is the asynchronous problem synchronization solution

We used Promise to solve the problem of using Ajax, setting async: false, and blocking all subsequent applications.

Let’s change the code

/ / synchronize
const p = new Promise((resolve, reject) = > {
  $.ajax({
    url: 'http://localhost:3000/data.json'.success(data){ resolve(data); }}); })/ / asynchronous
p.then((res) = > {
  console.log(getNames(res));
})

console.log('Dream Chasers');

function getNames(data) {
  return data.map(function(item) {
    returnitem.name; })}Copy the code

The Promise constructor is executed synchronously, but asynchronously requests data, and then resolves.

In fact, P.teng cannot block the following program, that is to say, p.teng must be asynchronous with the following program code, so that I can solve the above problem.

So now let’s see, does Promise exist to solve callback hell? It just solves the callback hell problem for you in passing.

Promise is a synchronous solution to an asynchronous problem.

AJAX is asynchronous. By wrapping a Promise, you can retrieve the results of an asynchronous program through promise.then, and it doesn’t block any programs other than the Promise, and it maintains an asynchronous relationship with any programs unrelated to the Promise.

Is Promise really the best solution to fix callback hell now? The best way is to use async/await, which lets us write asynchronous code in the same way as synchronous code, which is es6 syntax.

reference

  • Do you really know what “Promise” means? 【 Basic knowledge required 】

If there are any mistakes in this article, please correct them in the comments section. If this article helped you or you liked it, please like it and follow it.