Promise javascript là gì

Xin chào, trường hợp đã có lần thiết kế với Javascript, hẳn bạn đã sở hữu đôi lần nghe nói / thực hiện callbaông xã. Và với việc cách tân và phát triển như bây giờ của Javascript, thì bao gồm một vụ việc cực kỳ nhức nhối đã được thể hiện cùng với callbaông chồng của Javascript, đó là callback hell.Dưới đây là ví dụ (yaoming)

*

Và để giải quyết và xử lý vấn đề này, có một lời hứa đã có được hiện thực hóa, vâng thương hiệu của chính nó đó là Promise. Trong bài dịch lần này từ bỏ SitePoint (https://www.sitepoint.com/overview-javascript-promises/), bản thân đã reviews Promise và chức năng của nó vào việc giải quyết gò trên kia

Đây thực thụ là một tin giỏi lành, giống hệt như là đá quý Giáng Sinc dành cho những Javascript Developers vậy. quý khách đã Cảm Xúc thiệt niềm hạnh phúc lúc biết rằng Promise giờ đã trở thành một trong những thư viện chuẩn chỉnh của JavaScript. Chrome 32 bản beta đang implement những API Promise basic. Tư tưởng của Promise không còn mới cùng với developer. Hầu không còn bọn họ ddax từng cần sử dụng Promise trong một vài thư viện sẽ gồm của JS như là Q, when, RSVP, Bluebird,... mặc khi jQuery cũng có thể có một chức năng hotline là Deferred Object hoạt động tựa như nhỏng Promise. Nhưng câu hỏi Promise được support native sầu thiệt xứng đáng kinh ngạc. Và nội dung bài viết tiếp sau đây vẫn diễn tả gần như điểm cơ phiên bản của Promise cùng cách để chuyển code JS của bạn lên một tầm cao bắt đầu

Overview

Một object Promise đại diện thay mặt cho 1 quý giá ở thời điểm hiện nay hoàn toàn có thể chưa tồn tại, tuy thế sẽ được cách xử lý và có giá trị vào một thời hạn như thế nào đó sau đây. Việc này sẽ giúp các bạn viết các chiếc code cách xử lý ko đồng bộ trông có vẻ như nhất quán hơn. Lấy ví dụ, nếu khách hàng sử dụng Promise mang đến vấn đề Điện thoại tư vấn API để mang dữ liệu, các bạn sẽ tạo nên một đối tượng người dùng Promise đại diện mang lại data đem được trường đoản cú API. Điều chủ đạo sinh sống đây là dữ liệu sẽ chưa có sinh sống thời gian đối tượng người tiêu dùng Promise được tạo nên, cơ mà chỉ rất có thể truy cập sau khi tất cả response từ web service. Trong thời gian đợi lấy dữ liệu, Promise object vẫn vào vai trò nlỗi một proxy đến dữ liệu. ngoại giả, chúng ta cũng có thể đính thêm các callbachồng vào Promise object nhằm tiến hành vấn đề giải pháp xử lý tài liệu. Các callbachồng này đang chỉ tiến hành lúc tài liệu đang chuẩn bị.

Bạn đang xem: Promise javascript là gì

Promise API

Tiếp theo trên đây bọn họ sẽ đến với những API cơ bạn dạng của PromiseĐể bước đầu, hãy thuộc khám phá đoạn code sau, đấy là biện pháp khởi tạo một đối tượng người tiêu dùng Promise .

if (window.Promise) // Cheông chồng if the browser supports Promises var promise = new Promise(function(resolve, reject) //asynchronous code goes here );Chúng ta bắt đầu với Việc khởi sản xuất một đối tượng người tiêu dùng Promise và truyền vào kia một hàm callbaông chồng. Hàm callbaông chồng này sẽ thừa nhận 2 tham mê số là resolve và reject, đối với tất cả 2 tđắm say số đều sở hữu loại là hàm (function). Tất cả những code bất đồng nhất đang bên trong hàm callback này. Nếu những đồ vật thành công xuất sắc, Promise sẽ tiến hành ngừng với hàm resolve sẽ được Điện thoại tư vấn. Trong trường hòa hợp gồm lỗi, hàm reject sẽ tiến hành Gọi với cùng một đối tượng người sử dụng Error, nhằm mục đích khẳng định rằng Promise này đã biết thành không thành công.

Giờ hãy thử chế tạo một ví dụ đơn giản dễ dàng nhằm mô tả phương pháp thực hiện Promise. Các mẫu code sau sẽ tạo nên một request bất đồng hóa (asynchronous) mang đến một website service với trả về một quãng JSON. Chúng ta đang tò mò Promise chuyển động vào trường đúng theo này như thế nào

if (window.Promise) console.log("Promise found"); var promise = new Promise(function(resolve sầu, reject) var request = new XMLHttpRequest(); request.open("GET", "http://api.icndb.com/jokes/random"); request.onload = function() if (request.status == 200) resolve(request.response); // we got data here, so resolve sầu the Promise else reject(Error(request.statusText)); // status is not 200 OK, so reject ; request.onerror = function() reject(Error("Error fetching data.")); // error occurred, reject the Promise ; request.send(); //skết thúc the request ); console.log("Asynchronous request made."); promise.then(function(data) console.log("Got data! Promise fulfilled."); document.getElementsByTagName("body")<0>.textContent = JSON.parse(data).value.joke; , function(error) console.log("Promise rejected."); console.log(error.message); ); else console.log("Promise not available");Ở đoạn code bên trên, phần khởi chế tạo Promise cất các code bất đồng nhất cần sử dụng mang lại câu hỏi đem tài liệu từ website service trải qua API. Tại trên đây, chúng ta tạo thành một Ajax request đến đường links http://api.icndb.com/jokes/random, liên kết này sẽ trả về một câu chuyện cười bất kỳ. lúc gồm response trả về (JSON string), nội dung của response sẽ được truyền cùng giải pháp xử lý vì hàm resolve(). Nếu có ngẫu nhiên lỗi như thế nào xảy ra, hàm reject() sẽ tiến hành Call với input là đối tượng người sử dụng Error.

lúc bọn họ khởi tạo một đối tượng người sử dụng Promise, chúng ta tất cả một proxy cho tài liệu đã chuẩn bị sẵn sàng thực hiện về sau. Trong ngôi trường vừa lòng ví dụ ngơi nghỉ bên trên, bọn họ hy vọng rằng tài liệu sẽ tiến hành truyền về từ bỏ phía website service vào một trong những thời gian như thế nào kia. Vậy có tác dụng núm nào nhằm bọn họ hiểu được lúc nào thì tài liệu sẽ chuẩn bị sẵn sàng mang lại câu hỏi sử dụng? Đây là Việc mà lại Promise.then() đang xử lý mang lại bọn họ. Hàm then vẫn dùng 2 tsay đắm số cùng với ý nghĩa: một callbachồng thành công xuất sắc với một callbaông xã thất bại. Các callbaông xã này sẽ được Call Lúc Promise được cách xử trí xong xuôi (thành công tốt thất bại). Nếu Promise được cách xử lý trơn tuột tru, callbachồng thành công sẽ được Gọi cùng với dữ liệu truyền vào hàm resolve(). Nếu promise chạm mặt lỗi, callbaông chồng thất bại được goi. Bất kể máy gì bạn truyền vào reject() sẽ tiến hành truyền nlỗi mội tđắm say số mang đến callbaông xã này.

Xem thêm: Cách Trồng Dâu Tây Ở Miền Bắc Của Chimi Farm, Cùng Tìm Hiểu Kỹ Thuât Trồng Dâu Tây Ở Miền Bắc

Code làm việc trên được thử nghiệm ở chỗ này. Bạn hoàn toàn có thể refresh lại page nhằm những lần nhìn thấy một câu chuyện mỉm cười không giống nhau. Đồng thời thử nhảy console của trình săn sóc, trường đoản cú đó các bạn sẽ thấy thứ từ tiến hành code. Lưu ý rằng một promise sẽ sở hữu được 3 tâm lý :

Pending (vẫn xử lý)Fulfilled (sẽ hoàn thành)Rejected (đã biết thành tự chối)

Mỗi đối tượng người sử dụng Promise sẽ sở hữu một trực thuộc tính private chứa tâm trạng hiện giờ của Promise. lúc một Promise được hoàn thành tốt lắc đầu, cực hiếm của trực thuộc tính này vẫn tức thì chớp nhoáng được cập nhật với tâm lý của Promise. Điều này có nghĩa là một Promise chỉ hoàn toàn có thể thành công hoặc không thắng cuộc một đợt duy nhất. Nếu một Promise đã được hoành thành, với tiếp nối bạn new Call hàm then() của promise cùng truyền vào 2 callbachồng, thì callback thành công xuất sắc sẽ luôn được Call. Vì thay, vào thế giới của Promise, họ không quan tiền đến sự việc khi nào Promise được cách xử trí. Chúng ta chỉ quan tâm mang đến kết quả đầu ra của Promise.

Nối những Promise

Sẽ có nhiều chúng ta mong mỏi nối các promises với nhau. ví dụ như, bạn cũng có thể có khá nhiều làm việc bất đồng nhất buộc phải xử trí. Khi một làm việc trả về tài liệu, các bạn sẽ bắt đầu một giải pháp xử lý bất nhất quán khác áp dụng một trong những phần tài liệu trường đoản cú làm việc trước kia, và cứ liên tục những điều đó. Promise cung ứng vấn đề nối các Promise với nhau y hệt như ví dụ dưới đây

function getPromise(url) // trả về một Promise ngơi nghỉ ddây // gửi một request lấy dữ liệu xuất phát điểm từ 1 url (request sự không tương đồng bộ) // sau thời điểm lấy về kết quả, xử lý promise cùng với dữ liệu nhấn đượcvar promise = getPromise("some url here");promise.then(function(result) //bọn họ tất cả tài liệu của url "some url here" tại đây return getPromise(result); //với trả về một promise khác).then(function(result) //ở chỗ này chứa công dụng promise vừa trả về ngơi nghỉ bên trên cùng logic để xử trí dữ liệu cuối cùng);Có một điều xứng đáng xem xét ở đây là lúc 1 cực hiếm thường thì được trả về trong hàm then() thứ nhất, hàm then() lắp thêm nhị đã tiến hành với giá trị đó. Nhưng nếu khách hàng trả về 1 Promise ngơi nghỉ hàm then() trước tiên, thì hàm then() đồ vật nhì sẽ hóng còn chỉ được gọi cho tới Khi Promise làm việc hàm then() đầu tiên thực hiện dứt xuôi.

Xử lý lỗi

Trước đó tôi đang trình làng hàm then() đã dìm 2 hàm callbacks làm cho tđắm say số. Hàm callbachồng thứ 2 sẽ được call Lúc Promise bị từ chối. Tuy nhiên bọn họ cũng có một giải pháp khác, thực hiện một hàm thương hiệu là catch(), chúng ta cũng có thể xử lý Lúc Promise bị từ chối. Đoạn code tiếp sau đây diễn đạt vấn đề thực hiện hàm catch():

promise.then(function(result) console.log("Got data!", result);).catch(function(error) console.log("Error occurred!", error););Đoạn làm việc trên tương đương với :

promise.then(function(result) console.log("Got data!", result);).then(undefined, function(error) console.log("Error occurred!", error););Lưu ý rằng nếu Promise bị không đồng ý và hàm then() không tồn tại callbaông chồng nhằm cách xử trí bài toán này, xử lý sẽ được đưa đến hàm cách xử lý lỗi của hàm then() tiếp theo sau hoặc hàm catch() tiếp sau. Ngoài vấn đề dùng để làm cách xử trí Promise bị lỗi, hàm callbaông xã trong catch() cũng khá được hotline Lúc tất cả bất kỳ exception nào được bắn ra tự callback của hàm khởi sản xuất Promise. Vì núm chúng ta cũng có thể dùng catch() mang đến vấn đề lưu giữ log. Chú ý rằng chúng ta có thể thực hiện try...catch nhằm giải pháp xử lý lỗi, tuy nhiên điều ấy là không quan trọng Khi thực hiện Promise vì chưng ngẫu nhiên exception nào thì cũng luôn được cách xử trí bởi hàm catch().

Xem thêm: Ngành Trinh Sát Kỹ Thuật Là Gì ? Hướng Nghiệp Tương Lai Học Trinh Sát Kỹ Thuật Ra Trường Làm Gì

Tổng kết

Trên phía trên chỉ nên hầu như giới thiệu cơ phiên bản về API Promise của Javascript. lúc nắm rõ nó, bạn có thể viết code cách xử trí những thao tác làm việc bất nhất quán một biện pháp thuận tiện. Chúng ta có thể xử lý nhỏng bình thường nhưng mà ko buộc phải quan tâm quý hiếm sẽ được trả về kế tiếp về sau. Có một vài ba API về Promise không được liệt kê tại đây. Để xem thêm, những chúng ta có thể tìm hiểu thêm một số trong những tư liệu sau.


Chuyên mục: Hỏi Đáp