Promise的基本使用
链式编程
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
<script>
// 使用setTimeout
// setTimeout(() => {
// console.log("hello world");
// }, 2000)
// 参数->函数(resolve,reject)
// resolve,reject本身他又是函数
// 链式编程
new Promise((resolve, reject) => {
// 第一次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)
}).then(() => {
// 第一次拿到结果的代码
console.log('hello world');
console.log('hello world');
console.log('hello world');
console.log('hello world');
console.log('hello world');
return new Promise((resolve, reject) => {
// 第二次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)
}).then(() => {
// 第二次拿到结果的代码
console.log('hello Vue');
console.log('hello Vue');
console.log('hello Vue');
console.log('hello Vue');
console.log('hello Vue');
return new Promise((resolve, reject) => {
// 第三次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)
}).then(() => {
// 第三次拿到结果的代码
console.log('hello python');
console.log('hello python');
console.log('hello python');
console.log('hello python');
console.log('hello python');
})
})
})
script>
html>
什么情况下会用到Promise？
一般情况下是有异步操作时，使用Promise对这个异步操作进程封装.
在执行传入的回调函数时，会传入两个参数，resolve，reject，本身又是函数
使用Promise
new Promise((resolve, reject) => {
setTimeout(() => {
// 成功的时候调用resolve
resolve('hello world')
// 失败的时候调用reject
reject('error message')
}, 1000)
}).then((data) => {
// 在这里处理代码
console.log(data);
console.log(data);
console.log(data);
}).catch(err => { //箭头函数只有一个参数时小括号可以不写
console.log(err);
})
另一种写法
new Promise((reslove, reject) => {
setTimeout(() => {
reslove("hello world");
// reject("error message")
}, 1000)
}).then(data => {
console.log(data);
}, err => {
console.log(err);
})
链式调用
1.网络请求:aaa=>处理10行代码
2.处理:aaa111=>自己处理10行
3.处理:aaa111222=>自己处理十行
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000);
}).then(res => {
// 1.自己处理10行代码
console.log(res, '第一层的10行处理代码');
// 2.对我们的结果进行第一次的处理
return new Promise((resolve) => {
resolve(res + '111')
})
}).then(res => {
console.log(res, '第二层的10行处理代码');
return new Promise(resolve => {
resolve(res + '222')
})
}).then(res => {
console.log(res, '第三层的10行代码');
})
简写方式
// new Promise(resolve => resolve(结果))简写
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000);
}).then(res => {
// 1.自己处理10行代码
console.log(res, '第一层的10行处理代码');
// 2.对我们的结果进行第一次的处理
return Promise.resolve(res + '111')
}).then(res => {
console.log(res, '第二层的10行处理代码');
return Promise.resolve(res + '222')
}).then(res => {
console.log(res, '第三层的10行代码');
})
更简洁的方式
省略掉Promise.resolve
// 省略掉Promise.resolve
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000);
}).then(res => {
// 1.自己处理10行代码
console.log(res, '第一层的10行处理代码');
// 2.对我们的结果进行第一次的处理
return res + '111'
}).then(res => {
console.log(res, '第二层的10行处理代码');
return res + '222'
}).then(res => {
console.log(res, '第三层的10行代码');
})
注意
如果在执行过程中失败时执行reject则不执行后面的resolve
Promise的all方法
伪代码表示
同时请求成功返回一个results数组
Promise.all([
new Promise((resolve, reject) => {
$ajax({
url: 'url1',
success: function(data) {
resolve(data)
}
})
}),
new Promise((resolve, reject) => {
$ajax({
url: 'url2',
success: function(data) {
resolve(data)
}
})
}),
]).then(results => {
results[0],
results[1]
})
利用setTimeout()模拟一下
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: 'JGF',
age: '30'
});
}, 2000);
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: 'MGM',
age: '26'
});
}, 1000);
}),
]).then(results => {
console.log(results);
})