I. The story of Promise
1. Promise history
Promise is a solution for asynchronous programming. It is more reasonable than our traditional callback functions and events. It was first proposed and implemented by the community.
A Promise is a container that holds the result of a future event (usually an asynchronous operation) and, syntactically speaking in javascript, an object from which to fetch information about an asynchronous operation, Promise provides a unified API that allows asynchronous operations to be handled in the same way.
2. Features of Promises
Feature 1: The state of the Promise object is not affected by the outside world. This represents an asynchronous operation that has three states :Pending, depressing, and Reject. Only the result of an asynchronous operation can determine which state it is in, and no other operation can change that state. That’s where promises come in. “Commitment” means that other means cannot be changed.
Characteristic 2: Once the state has changed, it will not change again. You can get this at any time. There are only two possibilities for the state of the Promise object to change from Pending to Fulfilled or Pending to Rejected. When those two things happen, the state is fixed, it’s not going to change, it’s going to stay the same result and that’s when it’s Resolved. Adding a callback to the Promise object gives you this result immediately, even if the change has already occurred. This is completely different from events, whose characteristics we all know that if we miss them, the results will not be monitored.
Two, basic usage
ES6 states that a Promise object is a construct to a function that generates a Promise instance.
let Promise=new Promise(function(resolve,reject){/* Logical code */ifResolve (value) {resolve(value)}else{
reject(error)
}
})
Copy the codeThe Promise constructor accepts two arguments, resolve and reject, provided by the javascript engine and not deployed by itself.
Resolve changes the state of the Promise object from ‘unfinished’ to ‘successful’ and passes the result of the asynchronous operation as an argument when the operation succeeds. The Reject function changes the state of the Promise object from “unfinished” to “failed” (i.e., from Pending to Rejected). It is called when the asynchronous operation fails, passing the asynchronous error.
Once a Promise instance is generated, then methods can be used to specify the Resolve and Reject state callbacks, respectively.
let Promise=new Promise(function(resolve,reject){})
Promise.then(function(value){
//success
},function(error){
//failuer
})
Copy the codeThe then method can take two callback functions as arguments. The first is called when the Promise object becomes Resolved, the second is called when the Promise object’s state changes to Rejectd, and the second is optional or unwritten. Both functions accept the outgoing value of the Promise object as arguments. Here’s a chestnut:
function timeout(ms){
return new Promise((resolve,reject)=>{
setTimeout(resolve,ms,'done')
})
}
timeout(100).then((value)=>{
console.log(value)
})
Copy the codeIn the code above, the timeout method returns an instance of a Promise, which will take some time to happen. After the specified time (ms), the Promise instance becomes Resolve, which triggers the then method binding callback.
Promise instantiates and executes immediately, as shown in the following print validation:
let promise=new Promise(function(resolve,reject){
console.log("I am Promise")
resolve()
})
promise.then(function(){
comsole.log("I'm a callback to then.")
})
console.log('hello,promise! ') // I am a Promise // Hello, Promise! / / I amthenThe callbackCopy the codeIn the above code, the Promise is instantiated immediately, so the Promise is printed first. Then, the callback function specified by the then method will not be executed until all the synchronization scripts of the current script have been executed, so the “I am then callback” is printed last.
Here’s an example of a page image loading asynchronously:
function loadImageAsync(url){
retutn new Promise(function(resolve,reject){
var image=new Image();
image.onload=function(){
resolve(image)
}
image.onerror=function(){
reject(new Error('could not load image at'+url))
}
image.src=url
})
}
Copy the codeThe common method used to prevent page blocking from loading images asynchronously is described above: resolve if the load succeeds, reject otherwise.
If you are not satisfied, you can simply implement the current single-page popular Vue and React frameworks, and the process of implementing Ajax based on Promise of THE Http request AXIos and FETCH used for development:
let getJSON=function(url){
let promise=new Promise(function() {let client=new XMLHttpRequest()
client.open('GET',url)
client.onreadystatechange=hander
cilent.responseType='json'
client.setRequestHeader('Accept'."application/json")
client.send()
function hander() {if(this.readystate! = 4) {return
}
if(this.statues===200){
resolve(this.response)
}else{
reject(new Error(this.stautsText))
}
}
})
return// Use getJSON('/xxx/xx.json').then((json)=>{
console.log('contents'+json)
},(error)=>{
console.log("Request error"+error)
})
Copy the codeIn the code above, getJSON is a promise wrapper around the XMLHttpRequest object. You can make an HTTP request for json data and return a Promise object. As you can see, both the resolve and reject functions take arguments. These arguments are passed to the callback. Reject is usually an instance of an Error object, indicating that an Error was thrown, and resolve can be another promise instance in addition to the normal value, for example:
let pro1=new Promise(function(resolve,reject){
//....
})
let pro2=new Promise(function(resolve,reject){
//...
resolve(pro1)
})
Copy the codeIn the code above, pro1 and pro2 are both instances of Promise, but pro2’s resolve method takes PRO1 as an argument, meaning that the result of one asynchronous operation returns the result of another. Pro1 determines the state of PRO2. If pro1 is pending, the callback function of PRO2 will wait for the resolve or Rejected state of PRO1 to be executed immediately.
Third, the Promise. Prototype. Then ()
Promise instances have then methods, which are defined on the prototype promise.Prototype object and add a callback function to the Promise instance when state changes. The first argument to the then method is the callback to the Resolve state and the second is the callback to the Rejected (optional) state.
The then method returns a new Promise instance, not the original Promise instance, so you can use chained notation, where the then method is followed by another then method.
getJSON('xxx/xx.json').then(function(json){
return json.post
}).tnen(function(post){
})
Copy the codeChained THEN allows you to specify a set of callbacks that are called in order, with the first callback possibly returning an asynchronous operation, a Promise instance, and the second callback waiting for the Promise object’s state to change before calling.
Four, Promise. Prototype. The catch ()
The promise.prototype. catch method is an alias for. Then (null, Rejection) that specifies the callback that failed.
Here’s an example:
getJSON('xxx/xx.json').then(function(json){
//...
}).catch(function(err){
console.log('wrong'+error)
})
Copy the codeCatch () will catch() whenever an asynchronous operation in THEN throws an error and the state becomes Rejected, and then specifies its callback function to execute and handle the error. Errors on Promise objects bubble backwards until they are caught by a catch() handler, meaning they are caught by the next catch statement.
getJSON('xxx/xx.json').then(function(json){ //... some code1 }).then(function(json){ //... some code2 }).catch(function(err){
console.log('wrong'+error)
})
Copy the codeThen () {getJSON (); then() {getJSON (); then() {catch (); The official recommendation is to always use the catch method to handle error exception callbacks.
.catch() differs from traditional try/catch methods in that Peomise objects throw errors that are not passed to the outer code unless the catch method is used to specify the error callback. In other words, the try/catch method is unreacted.
var errorNotCatch=function() {return new Promise((resolve,reject)=>{
fs.readFile('././xxx',(err)=>{
resolve(data)
})
})
}
errorNotCatch().then(data=>{
console.log('good');
})
Copy the codeThe code above. It’s not going to say try/catch good it’s not going to catch an error, but it’s going to say data is not defined
Five,
Guys, the above basic introduction, I hope to get a better understanding of some of your vue and React development Promise implementation.