Promise.prototype.then()

const promise1 = new Promise((resolve, reject) => {
  resolve("Success!");
});

promise1.then((value) => {
  console.log(value);
  // Expected output: "Success!"
});

then(onFulfilled)
then(onFulfilled, onRejected)

const pendingPromise = new Promise(() => {});
while (true) {
  pendingPromise.then(doSomething);
}

const p1 = new Promise((resolve, reject) => {
  resolve("Success!");
  // hoặc
  // reject(new Error("Error!"));
});

p1.then(
  (value) => {
    console.log(value); // Success!
  },
  (reason) => {
    console.error(reason); // Error!
  },
);

Promise.resolve(1).then(2).then(console.log); // 1
Promise.reject(new Error("failed")).then(2, 2).then(console.log, console.log); // Error: failed

Promise.resolve("foo")
  // 1. Nhận "foo", ghép nối "bar" vào nó, và resolve đến then tiếp theo
  .then(
    (string) =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          string += "bar";
          resolve(string);
        }, 1);
      }),
  )
  // 2. nhận "foobar", đăng ký một hàm callback để xử lý chuỗi đó
  // và in nó ra console, nhưng không trước khi trả về chuỗi chưa xử lý
  // đến then tiếp theo
  .then((string) => {
    setTimeout(() => {
      string += "baz";
      console.log(string); // foobarbaz
    }, 1);
    return string;
  })
  // 3. in các thông báo hữu ích về cách code trong phần này sẽ được chạy
  // trước khi chuỗi thực sự được xử lý bởi code bất đồng bộ giả lập trong
  // khối then trước đó.
  .then((string) => {
    console.log(
      "Last Then: oops... didn't bother to instantiate and return a promise in the prior then so the sequence may be a bit surprising",
    );

    // Lưu ý rằng `string` sẽ không có phần 'baz' tại thời điểm này. Điều này
    // là vì chúng ta đã giả lập điều đó xảy ra bất đồng bộ với hàm setTimeout
    console.log(string); // foobar
  });

// Logs, theo thứ tự:
// Last Then: oops... didn't bother to instantiate and return a promise in the prior then so the sequence may be a bit surprising
// foobar
// foobarbaz

const p2 = new Promise((resolve, reject) => {
  resolve(1);
});

p2.then((value) => {
  console.log(value); // 1
  return value + 1;
}).then((value) => {
  console.log(value, "- A synchronous value works"); // 2 - A synchronous value works
});

p2.then((value) => {
  console.log(value); // 1
});

Promise.resolve()
  .then(() => {
    // Làm cho .then() trả về một promise bị từ chối
    throw new Error("Oh no!");
  })
  .then(
    () => {
      console.log("Not called.");
    },
    (error) => {
      console.error(`onRejected function called: ${error.message}`);
    },
  );

Promise.resolve()
  .then(() => {
    // Làm cho .then() trả về một promise bị từ chối
    throw new Error("Oh no!");
  })
  .catch((error) => {
    console.error(`onRejected function called: ${error.message}`);
  })
  .then(() => {
    console.log("I am always called even if the prior then's promise rejects");
  });

Promise.reject(new Error("Oh no!"))
  .then(
    () => 99,
    () => 42,
  ) // onRejected trả về 42 được bọc trong một Promise fulfilled
  .then((solution) => console.log(`Resolved with ${solution}`)); // Fulfilled với 42

function resolveLater(resolve, reject) {
  setTimeout(() => {
    resolve(10);
  }, 1000);
}
function rejectLater(resolve, reject) {
  setTimeout(() => {
    reject(new Error("Error"));
  }, 1000);
}

const p1 = Promise.resolve("foo");
// Trả về promise ở đây, sẽ được resolved thành 10 sau 1 giây
const p2 = p1.then(() => new Promise(resolveLater));
p2.then(
  (v) => {
    console.log("resolved", v); // "resolved", 10
  },
  (e) => {
    // không được gọi
    console.error("rejected", e);
  },
);

// Trả về promise ở đây, sẽ bị rejected với 'Error' sau 1 giây
const p3 = p1.then(() => new Promise(rejectLater));
p3.then(
  (v) => {
    // không được gọi
    console.log("resolved", v);
  },
  (e) => {
    console.error("rejected", e); // "rejected", 'Error'
  },
);

function fetchCurrentData() {
  // API fetch() trả về một Promise. Hàm này
  // tiếp xúc một API tương tự, ngoại trừ giá trị fulfillment
  // của Promise của hàm này đã có thêm
  // công việc được thực hiện trên đó.
  return fetch("current-data.json").then((response) => {
    if (response.headers.get("content-type") !== "application/json") {
      throw new TypeError();
    }
    const j = response.json();
    // có thể làm gì đó với j

    // giá trị fulfillment được cung cấp cho người dùng của
    // fetchCurrentData().then()
    return j;
  });
}

// Sử dụng một promise đã resolved 'resolvedProm' ví dụ,
// lời gọi hàm 'resolvedProm.then(...)' trả về một promise mới ngay lập tức,
// nhưng trình xử lý của nó '(value) => {...}' sẽ được gọi bất đồng bộ như được minh họa bởi console.logs.
// promise mới được gán cho 'thenProm',
// và thenProm sẽ được resolved với giá trị được trả về bởi trình xử lý
const resolvedProm = Promise.resolve(33);
console.log(resolvedProm);

const thenProm = resolvedProm.then((value) => {
  console.log(
    `this gets called after the end of the main stack. the value received is: ${value}, the value returned is: ${
      value + 1
    }`,
  );
  return value + 1;
});
console.log(thenProm);

// Sử dụng setTimeout, chúng ta có thể trì hoãn việc thực thi một hàm đến khi stack rỗng
setTimeout(() => {
  console.log(thenProm);
});

// Logs, theo thứ tự:
// Promise {[[PromiseStatus]]: "resolved", [[PromiseResult]]: 33}
// Promise {[[PromiseStatus]]: "pending", [[PromiseResult]]: undefined}
// "this gets called after the end of the main stack. the value received is: 33, the value returned is: 34"
// Promise {[[PromiseStatus]]: "resolved", [[PromiseResult]]: 34}