promise是一种通过代码看起来同步并避免回调地狱而大大简化异步编程的模式 。promise详解参照
- 一个
promise只能resolved或reject一次,它不能成功或者失败两次,也不能从成功转成失败,反之亦然。promise,只要声明并绑定到变量,就会立即执行,为保证promise不是立即执行,需要将其封装到函数中。
一. 创建promise
var promiseExample = () => {
new Promise((resolve, reject) => {
if (Math.random() * 100 < 90) {
resolve('success,获取到结果...');
} else {
reject(new Error('fail,出现错误!'));
}
})
}
二. 使用promise
myPromise.then((resolvedValue) => {
console.log(resolvedValue);
}, (error) => {
console.log(error);
});
// 适当的错误处理
promiseThatResolves()
.then(() => {
throw new Error();
})
.catch(err => console.log(err));
promise栗子
//分别弹出 Hello World !三个弹窗
function printHello(ready) {
return new Promise(function (resolve, reject) {
if (ready) {
resolve("Hello");
} else {
reject("Good bye!");
}
});
}
function printWorld() {
alert("World");
}
function printExclamation() {
alert("!");
}
printHello(true)
.then(function (message) {
alert(message);
})
.then(printWorld)
.then(printExclamation);
//一个弹窗 Hello World !
function printHello(ready) {
return new Promise(function (resolve, reject) {
if (ready) {
resolve("Hello");
} else {
reject("Good bye!");
}
});
}
printHello(true).then(function (message) {
return message;
}).then(function (message) {
return message + ' World';
}).then(function (message) {
return message + '!';
}).then(function (message) {
alert(message);
});
三. promise 封装get请求
get: function (url) { //get请求封装
let prodApi = 'http://rmtj.justice.gov.cn/service/rest/mediation.Analysis/collection/';
var promise = new Promise((resolve, reject) => {
dd.httpRequest({
url: prodApi + url,
method: 'get',
dataType: 'json',
success: function (res) {
if (res.status == 200) {
resolve(res);
} else {
reject('请求数据失败');
}
},
error: function (e) {
reject('网络出错');
}
})
});
return promise;
}
四. promise 封装异步请求
处理:请求接口2 所需的参数是请求接口1后的返回值,接口1返回值不及时而报错的问题 !
// promise封装接口调取
getPrintData(baseUrl, url, params) {
const _that = this;
return new Promise(function(resolve, reject) {
_that.restClient.request(baseUrl, url, params).then(
res => {
resolve(res);
},
error => {
reject(error);
}
)
})
}
// 上次结果回来后,再次调用第二个接口
this.getPrintData('nos.UserPrintService', 'retrieve', {}).then(
checkedItem => {
// ... 第一次请求结果返回后处理逻辑
const params = { types: typeParams, volumeId }
this.getPrintData('npm.Volume_DocumentService', 'print', params).then(res => {
// ... 第二次请求结果返回后处理逻辑
});
},
);