Promise异步编程
程序员文章站
2022-07-02 21:24:44
...
由于JavaScript是一门单线程语言,在同一时间只允许一个代码块执行,所以就会造成前面的代码在执行,而后面的代码需要等待,这个时候异步编程显得很重要了,可以在前面的代码还没加载完前直接执行。
了解Promise的生命周期:
- 进行中(pending):操作还未开始
- 已处理(settled):异步操作执行结束
- 结束后进入以下两种状态中的一种:
1:成功(Fulfilled):操作成功
2:失败(Rejected):由于程序出错或别的原因,未能成功
所有的Promise都有then方法,该方法有两个可选参数,前者为成功时调用的函数,后者是失败调用的函数
let promise = new Promise((resolve, reject) => {
resolve('success');
reject('error');
});
//两个参数
promise.then(function (data) {
console.log(data); //返回成功的数据
}, function (err) {
console.log(err); //返回失败的数据
})
//只有成功参数
promise.then(function (data) {
console.log(data); //返回成功的数据
})
//只有失败参数,使用null替代前一个参数
promise.then(null,function (error) {
console.log(error); //返回失败的数据
})
Promise还有catch()方法接受失败的数据,更加清晰的表示,then来处理成功的,catch来处理失败的
promise.catch(function (error) {
console.log(error); //返回失败的数据
})
相当于没有成功参数表示:
promise.then(null,function (error) {
console.log(error); //返回失败的数据
})
创建未完成的Promise可以根据Promise构造函数来创建新的Promise,只有一个函数作为参数,而该函数有两个参数,分别为resolve()函数和reject()函数,成功执行resolve函数,失败执行reject()函数
let promise = new Promise((resolve, reject) => {
resolve('success');
reject('error');
});
创建已处理的Promise
let success= Promise.resolve('success');
success.then(function (data) {
console.log(data); //返回成功的数据
})
let fail= Promise.reject('error');
fail.catch(function (err) {
console.log(err); //返回失败的数据
})
Promise的resolve()和reject()方法都可以接受非Promise的Thenable对象作为参数
let thenable = {
then: function(resolve, reject) {
resolve('success');
}
}
let promise = Promise.resolve(thenable);
promise.then(function(data) {
console.log(data);
})
执行器错误:当执行器内部中抛出错误时,失败处理程序会被调用
let promise = new Promise((resolve, reject) => {
throw new Error('error');
});
promise.then((error) => {
console.log(error.message);
})
串行Promise:当前者被解决了,后者才会处理程序
promise.then((success) => {
console.log(success);
}).then(() => {
console.log('hello');
})
promise.then((success) => {
console.log(success);
}).catch((err) => {
console.log(err);
})
封装一个promise异步的ajax请求
var getJSON = function(url) {
var promise = new Promise((resolve, reject) => {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET',url);
xmlHttp.onreadystatechange = handler;
xmlHttp.responseType = 'json';
xmlHttp.setRequestHeader("Accept","application/json");
xmlHttp.send();
function handler() {
if(this.readyState === this.DONE) {
if(this.status === 200) {
resolve(this.response);
} else {
reject(this);
}
}
}
});
return promise;
};
getJSON('/get.json').then(function(data) {
console.log(data);
}, function(err){
console.log(err);
})
上一篇: Python 内置函数 classmethod 类方法
下一篇: 使用axios