Promise JavaScript

"I Promise a Result!"

"Producing code" (code production) yana code za a yin need some time

"Consuming code" (code consumption) yana code za a yin wait result

Promise yana object JavaScript, ita za a yin link code production and code consumption

JavaScript Promise object

JavaScript Promise object za a yin za a yin include producing code and call of consuming code:

Syntax Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (za a yin need some time)
  myResolve(); // Success
  myReject();  // Error
});
// "Consuming Code" (za a yin wait a fulfilled promise)
myPromise.then(
  function(value) { /* Code when success */ },
  function(error) { /* Code when error */ }
);

Kai a yin zai execute code za a yin result, ita za a yin call one of two callback:

Result Call
Success myResolve(value result)
Error myReject(object error)

Attribute Promise object

JavaScript Promise object za a yin za a yin:

  • Pending
  • Fulfilled
  • Rejected

Promise object za a yin za a yin attribute:state da result.

Kai Promise object yana "pending" (a yin), result yana undefined.

Kai Promise object yana "fulfilled", result yana value.

Kai Promise object yana "rejected", result yana object error.

myPromise.state myPromise.result
"pending" Undefined
"fulfilled" Value result
"rejected" Object error

Anan za a yin zai Promise attribute state da result.

Anan za a yin yi Promise methodi dona Promise.

Kuwa a yin zai Promise

Duba haka sabon tarin amfani da Promise:

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Promise.then() tana da mutane biyu, wani shine sabunta kalmomin na kaiwa, wani na baiwa kaiwa.

Iyane dake amfani, kuma ana iya raba kalmomin ga kaiwa ko baiwa kaiwa.

Shafin

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// ɗaukar code (za a iya kara wakilin wa'ala)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

亲自试一试

Masanin Promise a JavaScript

Domin nuna amfani da Promise, za a samar da masanin sabunta callback daga baya:

  • Sakawa da faiyadarsa
  • Sakawa da fassarwa

Sakawa da faiyadarsa

Amfani da sabunta callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

亲自试一试

Promise ɗin ka amfani

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

亲自试一试

Sakawa da fassarwa

Amfani da sabunta callback

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

亲自试一试

Promise ɗin ka amfani

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

亲自试一试

浏览器支持

ECMAScript 2015，也称为 ES6，引入了 JavaScript Promise 对象。

下表注明了首个完全支持 Promise 对象的浏览器版本：

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
2014 年 2 月 2015 年 7 月 2014 年 4 月 2014 年 9 月 2014 年 3 月