目录
ES6-Promise的基本用法
1.回调地狱
- 回调地狱： 因为js是单线程的， 有些时候为了代码功能需求，需要函数嵌套函数，当函数嵌套多层时，就会形成回调地狱
//里面函数嵌套函数时
function fun() {
setTimeout(function() {
console.log(2);
setTimeout(function() {
console.log(1);
setTimeout(function() {
console.log(3);
})
})
})
}
通过Promise方法解决回调地狱
2.什么是Promise
Promise() 是一个对象：
它有三种形态：
1、pending 进行中
2、resolve 成功执行
3、reject 失败执行
- 当状态改变时，智能从pending转换成resolve或者从pending转换成reject；如果处于pending状态，永远不知道下一步转换成什么状态
- Promise() 接收一个函数作为参数； 函数存在两个参数（这两个参数是js原生提供的） 一个是resolve， 一个是reject
Promise()的执行机制：
如果Promise()执行成功，则会调用执行 resolve()； resolve()中的参数就是执行成功的结果，通过then() 进行接受， then() 参数是一个函数，函数的参数就是 resolve传递传递出来的数据
如果Promise()执行失败， 则会调用执行 reject(); reject()中的参数就是执行失败的错误信息， 通过 catch()进行接受， catch的参数一个函数。 函数的参数 err 就是reject 传递出来的错误信息
3.用Promise解决上面1函数嵌套的问题
// 使用Promise() 解决
function fun1() {
//1.先创建一个promise对象
return new Promise((resolve, reject) => {
setTimeout(() => {
// then()
console.log('输出1');
//2.resolve 输出成功的状态
resolve()
}, 1000)
})
}
function fun2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// then()
console.log('输出2');
resolve()
}, 2000)
})
}
function fun3() {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('setTimeout3');
resolve();
}, 2000)
})
}
//通过then先调用fun2，再把fun2的结果返回，给fun1用，在把fun1的结果返回给fun3用 所以输出的结果为 2 3 1
// 链式写法
fun2().then(fun1).then(fun3).then(() => {
console.log('promise 执行全部结束');
})
js中的try-catch语句
格式为：
第一种写法：
try{
//测试的代码
}catch{
//代码的异常捕获(错误提示)
}
第二种写法：
try{
//测试的代码
}catch（err）{
//代码的异常捕获(错误提示)
}
catch后面还有一个语句
try{
// 代码测试
}catch{
// 异常捕获
}finally{
// finally 使用较少
// 无论代码是否出错，此处的代码始终执行
}
【注意】如果需要输出错误的信息，catch后面需要跟（）并且需要传入一个参数err (就是错误信息)，如果不需要输出错误信息，catch后不需要跟（）
Promise的all方法
当有多个Ajax请求的时候，如何判断多个请求是否运行结束呢？
Promise.all方法就可以解决这个问题
<script>
function fun1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("setTimeout1");
resolve("setTimeout1执行成功")
// reject("1执行失败")
}, 1000)
})
}
function fun2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("setTimeout2");
resolve("setTimeout2执行成功")
// reject("2执行失败")
}, 1500)
})
}
function fun3() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("setTimeout3");
resolve("setTimeout3执行成功")
// reject("1执行失败")
}, 2000)
})
}
const c = Promise.all([fun1(), fun2(), fun3()]);
console.log(c);
c.then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
})
</script>
-
Promise.all() 参数是一个数组， 数组中的每个值都是Ppromise()的实例对象，
-
上面的案例中 c 的状态 有 fun1(), fun2(), fun3() 决定，只有fun1(), fun2(), fun3() 都是成功，则 p的 状态是 成功 fulfilled （resolve）； 如果 fun1(), fun2(), fun3() 存在一个失败，则 c的状态 是失败rejected
-
then()方法的回调函数的参数 是 所有 Promise()实例执行成功时传递的数据，自动把所有的数据放到一个数组中
Promise的race方法
Promise.race() 方法 的参数是一个数组， 数组中的每个值是 Promise() 实例对象； 最后返回一个新的Promise() 对象
状态 改变： fun1(), fun2(), fun3() 三个实例对象 谁的状态先改变（不管成功还是失败），则p的状态都会随之跟随改变 如果fun1(), fun2(), fun3() 三个实例对象 先改变的状态是成功，则成功，如果失败则失败
// 1的状态是失败的，所以都是失败
function fun1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('setTimeout1');
// resolve('setTimeout1 的 data');
reject('setTimeout1 第一个失败');
}, 1000)
})
}
function fun2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('setTimeout2');
resolve('setTimeout2 的 data2');
// reject('setTimeout2 的 失败');
}, 1500)
})
}
function fun3() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('setTimeout3');
resolve('setTimeout3 的 data3');
// reject('setTimeout3 失败了');
}, 2000)
})
}
// Promise.race() 方法 的参数是一个数组， 数组中的每个值是 Promise() 实例对象； 最后返回一个新的Promise() 对象
// 状态 改变： fun1(), fun2(), fun3() 三个实例对象 谁的状态先改变（不管成功还是失败），则p的状态都会随之跟随改变 如果fun1(), fun2(), fun3() 三个实例对象 先改变的状态是成功，则成功，如果失败则失败
//
const p = Promise.race([fun1(), fun2(), fun3()]);
p.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
async和await的基本用法
回调地狱： 通过 Promise() 解决
Promise() 解决回调地狱会产生一个新的问题： 就是 Promise()的链式调用问题
什么是async
async 函数 是一个异步操作， 返回的是一个Promise()对象
await 等待 ; 在 async函数中使用 通常情况下 await 后是一个Promise()对象， 如果不是，会自动转换为Promise()对象形式
Promise.resolve(100) 把数据传递出去
async 和 await 结合使用 可以把异步的操作以同步的形式展示
async function fun() {
console.log(1);
//await后面 可以是一个函数，也可以是一个具体的值，也可以是promise对象
let res = await fun2();
await fun3()
let res2 = await 2000;
let res3 = await new Promise(function(resolve, reject) {
resolve('这是Promise对象')
})
return "hello" + res + res2 + res3;
}
async function fun2() {
console.log(2);
return "world"
}
async function fun3() {
console.log(3);
return "四大方法法国"
}
fun().then(res => {
console.log(res);
});