作用：异步操作解决回调地狱，对异步操作进行封装
网络请求数据不是立马拿到结果，需要先传入另一个函数，在数据请求成功时，将数据通过传入的函数回调出去
回调地狱
//通过url1从服务器加载数据data1，data1中包含下一个请求的url2；
//通过data1取出url2，从服务器加载数据data2，data2中包含下一个请求url3；
//通过data2取出url3，从服务器加载数据data3，data3中包含下一个请求url4；
//发送网络请求url4，最终获取数据data4
$.ajax('url1', function(data1) {
$.ajax(data1['url2'], function(data2) {
$.ajax(data2['url3'], function(data3) {
$.ajax(data3['url4'], function(data4) {
console.log(data4)
})
})
})
})
通过Promise可以优雅的解决网络请求代码和处理代码的分离
要点：
1.Promise需要传入一个参数，这个参数是一个函数，可以直接使用箭头函数表示；
new Promise = (() => {
})
2.Promise传入的这一个参数有两个参数(resolve, reject)，这两个参数本身也是函数
new Promise = ((resolve, reject) => {
//这里面处理异步操作
//用setTimeout模拟异步操作
setTimeout(() => {
}, 2000)
})
3.异步操作中
当成功时调用resolve，处理代码在then中执行，then本身也需要传入函数，使用箭头函数；resolve(这里面的data)就是then(这里面的data)
//成功状态
new Promise((resolve, reject) => {
setTimeout(() => {
//调用resolve
resolve();
}, 2000)
}).then(() => {
console.log("success");
})
//调用resolve时传入参数
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("调用成功");
}, 2000)
}).then((success) => {
console.log(success);//success就是resolve传入的内容
})
当失败时调用reject，处理代码在catch中执行，catch本身也需要传入函数，使用箭头函数；
//失败状态
new Promise((resolve, reject) => {
setTimeout(() => {
//调用reject
reject();
}, 2000)
}).catch(() => {
console.log("error");
})
//调用reject时传入参数
new Promise((resolve, reject) => {
setTimeout(() => {
reject("调用失败");
}, 2000)
}).catch((err) => {
console.log(err);//err就是reject传入的内容
})
实例
<!DOCTYPE html>
<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>Promise基本使用</title>
</head>
<body>
</body>
<script>
// 网络请求数据不是立马拿到结果，需要先传入另一个函数，在数据请求成功时，将数据通过传入的函数回调出去
// setTimeout(() => {
// console.log("hello");
// }, 3000);
// Promise需要传入一个参数，这个参数是一个函数，可以直接使用箭头函数表示；
// new Promise(() => {
// })
// Promise传入的这一个参数有两个参数(resolve, reject)，这两个参数本身也是函数
// new Promise((resolve, reject) => {
// })
new Promise((resolve, reject) => {
// 异步操作-第一次请求
setTimeout(() => {
// 只要调用resolve，下面可以跟着then，then里面放处理代码
// 只要调用reject，下面可以跟着catch，catch里面放处理代码
// then或者catch需要传入一个参数，这个参数是一个函数，可以直接用箭头函数表示
resolve()
}, 2000);
}).then(() => {
// 第一次处理
console.log("第一次调用");
console.log("第一次调用");
console.log("第一次调用");
console.log("第一次调用");
console.log("等两秒我要调用第二次");
// 可以继续声明promise
return new Promise((resolve, reject) => {
// 异步操作-第二次请求
setTimeout(() => {
// 调用传参数
resolve("第二次调用")
}, 2000);
}).then((success) => {
// 第二次处理
console.log(success);
console.log(success);
console.log(success);
console.log(success);
console.log("等两秒我要调用第三次");
return new Promise((resolve, reject) => {
// 异步操作-第三次请求
setTimeout(() => {
// 成功的时候调用resolve(), 会执行then
// resolve();
// 失败的时候调用reject(), 会执行catch
reject("error message");
}, 2000);
}).then(() => {
// 第三次处理
console.log("第三次调用");
console.log("第三次调用");
console.log("第三次调用");
console.log("第三次调用");
console.log("第三次调用");
}).catch((err) => {
console.log(err);
})
})
})
</script>
</html>
