【Promise】Promise基本使用
示例代码:
// vue.js
let getData = (params) => {
let promise = new Promise(function (resolve, reject) {
getData(params).then(res => {
if (res.data) {
resolve("SUCCESS!")
} else {
reject("FAILED!")
}
})
})
return promise
}
this.getData (params).then((data)=>{
//...
console.log('the result is ' + data)
}).catch((data)=>{
//...
console.log('the result is ' + data)
})
这是一个从后台查询数据的方法,getData(params)方法向后台发送请求,看起来,Promise有点陌生,代码好像有点复杂。
回想一下,以前写过的代码里面,如果要实现:唯一性校验——>提交,实现方法可能是:
let submit(params){
// 后台请求
validate(params).then((res)=>{
if(res && res.data === 'TRUE'){
// 提交方法
sumbitData(params).then((res) => {
//其它操作
})
}
})
}
这样的嵌套可能不仅有两层,这时,掉进了可怕的回调地狱。。再看看Promise,
Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
Pormise有三种状态,pending(进行中)、fulfilled(已成功)和rejected(已失败),状态的变化只有两种方法。Promise有resolved和rejected来处理这两种变化。
let p = new Promise((resolve, reject) => {
validate(params).then((res)=>{
if(res.data === 'TRUE'){
resolve(params)
}else{
reject(error)
}
})
p.then((params) => {
sumbitData(params).then((res) => {})
}).catch((error)=>{
console.log(error)
})
})
当validate()成功执行时,调用resolve()方法,失败时,调用reject()方法。Promise有then(onfulfilled, onrejected)方法分别指定resolved状态和rejected状态的回调函数,then方法包含两个参数:onfulfilled 和 onrejected,它们都是 Function 类型,分别对应resolve和reject方法:
onfulfilled(data)——resolve(data),Promise状态为fulfilled;
onrejected(data) —— reject(data),Promise状态为rejected。
此外,Promise有catch方法来捕捉异常,类似于java的try...catch,也相差于then(null,errorFunc)。
then返回的是一个新的Promise,所以,可以用doSomething().then().then()...
例子待补。。。
上一篇: 自己实现一个Promise
下一篇: 实现一个简陋地Promise