Bagaimana untuk menggunakan Typescript dengan ES6 Promise asli?

Dalam versi ES6 ECMAScript, janji diperkenalkan buat kali pertama.

Untuk menggunakan janji ES6 dalam projek TypeScript, pengguna perlu mengubah suai fail tsconfig.json

Tambah kod berikut di dalam objek 'compilerOptions'.

{
   "compilerOptions": {
      "target": "es6",
   }
}

Selain itu, pengguna boleh menambah 'ES6' dalam atribut 'lib' di bawah.

{
   "compilerOptions": {
      "lib": [
         "es6",
         "dom"
      ],
   }
}

Walau bagaimanapun, pengguna juga boleh menggunakan versi ECMAScript yang berikutnya kerana mereka menyokong Janji asli dalam TypeScript. Contohnya, es7, es10, dsb.

Dalam TypeScript, janji asli merujuk kepada janji yang dibuat menggunakan pembina Promise() dalam kod TypeScript. Walau bagaimanapun, kami boleh menyelesaikan janji yang dikembalikan daripada sebarang permintaan API.

Janji ini boleh mempunyai tiga negeri berikut.

• Pending - Ini bermakna komitmen masih belum selesai.

• Selesai - Ini bermakna janji telah berjaya diselesaikan tanpa sebarang kesilapan.

• Ditolak - Ini bermakna janji disempurnakan dengan kesilapan.

Tatabahasa

Pengguna boleh menggunakan Promise asli dalam TypeScript mengikut sintaks berikut.

const promise = new Promise((resolve, reject) => {
   
   // resolve or reject the promise
});
promise
.then(() => {
   
   // show results
})
.catch(() => {
   
   // show error
});

Dalam sintaks di atas, kami mencipta janji menggunakan pembina Promise() dan mengendalikan hasil dan ralat dalam blok then() dan catch(). Selain itu, 'T' mewakili jenis pulangan apabila janji berjaya diselesaikan.

Contoh 1 (Komitmen Asas)

Dalam contoh berikut, kita akan belajar pada asasnya menggunakan Promise asli ES6 dalam TypeScript. Kami mencipta dua Janji bernama first_promise dan second_promise. Kami telah menyelesaikan first_promise dan menolak second_promise.

Selain itu, pengguna dapat melihat bahawa jenis pemulangan janji adalah rentetan. Apabila janji pertama berjaya diselesaikan, kawalan pelaksanaan pergi ke blok then() apabila janji kedua ditolak, kawalan pelaksanaan pergi ke blok catch().

// resolving a promise
const first_promise = new Promise((res, rej) => {
   res("First promise resolved");
});
first_promise
.then((result: string) => {
   console.log(result);
})
.catch((err) => {
   console.log(err);
});

// rejecting a promise
const second_promise = new Promise((res, rej) => {
   rej("Second promise rejected");
});
second_promise
.then((result: string) => {
   console.log(result);
})
.catch((err) => {
   console.log(err);
});

Apabila disusun, ia akan menghasilkan kod JavaScript berikut.

// resolving a promise
var first_promise = new Promise(function (res, rej) {
   res("First promise resolved");
});
first_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) { 
   console.log(err);
});

// rejecting a promise
var second_promise = new Promise(function (res, rej) {
   rej("Second promise rejected");
});
second_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) {
   console.log(err);
});

Contoh 2 (Janji Bersarang)

Dalam contoh di bawah, kami menunjukkan cara menggunakan janji bersarang. Kami mencipta outer_promise menggunakan kata kunci baharu dan pembina Promise(). Di dalam fungsi panggil balik outer_promise, kami mencipta sub-janji baharu dan menyelesaikan sub-janji tersebut.

Dalam output, pengguna boleh melihat bahawa outer_promise berjaya diselesaikan sebagai sub-promise. Jika kita menolak sub-janji, outer_promise juga akan ditolak.

// resolving a promise
const outer_promise = new Promise((res) => {
   res(
      new Promise((resChild) => {
         resChild("Child Promise Resolved");
      })
   );
});
outer_promise
.then((result: string) => {
      console.log(result);
})
.catch((err) => {
   console.log(err);
}); 

Apabila disusun, ia akan menjana kod JavaScript berikut.

// resolving a promise
var outer_promise = new Promise(function (res) {
   res(new Promise(function (resChild) {
      resChild("Child Promise Resolved");
   }));
});
outer_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) {
   console.log(err);
});

Terjemahan bahasa Cina bagi

Contoh 3 (Janji Berantai)

ialah:

Contoh 3 (Janji Berantai)

Dalam contoh di bawah, kami menunjukkan janji yang jelas dalam TypeScript. Seperti namanya, ia adalah satu siri janji. Di sini, apabila kami menyelesaikan numeric_promise, kami mengembalikan nilai angka.

Kami mendapat 10 hasil di dalam blok then(). Selepas itu, kita darabkan hasil dengan 2 dan kembalikan. Kita boleh mendapatkan nilai yang dikembalikan daripada blok then() pertama di dalam blok then() kedua, dan seterusnya. Jika sebarang ralat berlaku, kawalan pergi terus ke blok catch().

Dalam output, pengguna boleh melihat bahawa nilai hasil dalam setiap blok then() digandakan.

// resolving a promise
const numeric_promise = new Promise((res) => {
   res(10);
});
numeric_promise
.then((result: number) => {
   console.log("The result in the first then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the second then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the third then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the fourth then() block is - " + result);
})
.catch((err) => {
   console.log(err);
}); 

Selepas penyusunan, kod JavaScript berikut akan dihasilkan. Tepati janji

var numeric_promise = new Promise(function (res) {
   res(10);
});
numeric_promise
.then(function (result) {
   console.log("The result in the first then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the second then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the third then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the fourth then() block is - " + result);
})["catch"](function (err) {
   console.log(err);
}); 

Pengguna belajar menggunakan janji asli ES6 dalam TypeScript. Kami juga belajar menggunakan janji bersarang dan merantai janji. Biasanya, pengguna akan menerima janji sebagai respons daripada API dan perlu menggunakan blok then() dan catch() untuk mengendalikannya.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Typescript dengan ES6 Promise asli?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!