以定时器的异步事件为例:每一个定时器都看作是一次网络请求,如果用普通的$ajax来写的话,假如数据处理代码量多且请求嵌套过多,会出现回调地狱。。。
promise写的话,结构清晰。处理优雅。
new Promise((resolve, reject) => {
// 第一次请求
setTimeout(() => {
resolve();
}, 1000)
}).then(() => {
// 第一次处理
let data = "hello world";
console.log(data)
console.log(data)
console.log(data)
return new Promise((resolve, reject) => {
// 第二次请求
setTimeout(() => {
resolve()
}, 1000)
})
}).then(() => {
// 第二次处理
let data1 = "hello 2"
console.log(data1)
console.log(data1)
return new Promise((resolve, reject) => {
// 第三次请求
setTimeout(() => {
resolve()
}, 1000)
})
}).then(() => {
// 第三次处理
let data2 = "hello 3"
console.log(data2)
console.log(data2)
console.log(data2)
})
忽略.catch()的写法,照样将setTimeout看作一次网络请求。
new Promise( (resolve,reject) => {
setTimeout(() => {
// resolve("成功了!")
reject("失败了!")
},1000)
}).then( data => {
console.log(data)
},err => {
console.log(err)
})
简写展示:
// 普通写法
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("成功了!")
// reject("失败了!")
}, 1000)
}).then(data => {
console.log(data)
// 普通写法
return new Promise(resolve => {
resolve(data + ' 第二次处理')
})
.then(data => {
console.log(data)
// 简写一
// return Promise.resolve(data + ' 第三次处理')
// 手动抛出异常,测试是否能catch到
throw "err"
}).then(data => {
console.log(data)
// 简写二
return data + ' 第四次处理'
}).then(data => {
console.log(data)
})
}).catch (err => {
console.log(err)
})