Promies的概念 链式调用
axios基于promis的API进行封装的
Promise主要解决了异步操作 回调函数的多层嵌套形成回调地狱的问题 、
Promise-概念及基本使用
Promise可以用来解决上一节回调函数嵌套的问题,mdn查看如何使用它概念
返回的是Promise Promise原型Prototype里面有很多方法 .then .catch,rejevtd
Promise是一个构造函数 通过实例化对象 return Promise实例化对象.then .then 会形成链式调用
Promise-总结
问题:
谈一谈你对于Promise的理解?
-
第一层理解(解决了什么问题)
-
回调函数嵌套-->链式编程
-
.then().then() -
第二层理解(语法层面,实际应用)
-
new Promise((resolve,reject)=>{ 异步的逻辑, 根据成功/失败 (resolve/reject) }) -
resolve和reject的本质,修改Promise对象的状态 -
状态有3种:
-
默认状态:
pending -
成功:
fullfilled--->then -
失败:
rejected--->then(,失败的回调函数),.catch(err=>{})
-
-
then方法默认也会返回一个
Promise,可以继续的then下去 -
但是一般我们 会自己返回一个
Promise对象进行处理 -
开发中
-
常用,接口调用
-
then -
多个接口需要都等待还可以使用
Promise的静态方法 -
Promise.all([pro对象1,promise对象2...]).then(res=>{})-
resPromise数组种每一个对象的成功结果
-
-
Promise.race等待第一个
-
-
-
-
<body>
<h2>测试axios返回的是否是Promise</h2>
<script src="./lib/axios.js"></script>
<script>
// axios基于promis的API进行封装的
// const p = axios({}).then(() => {});
// console.log(p); //返回的是Promise Promise原型Prototype里面有很多方法 .then .catch,rejevtd
// 两种状态只能执行 一次 谁写上面谁先执行
// Promise是一个构造函数 p是实例化对象 return Promise实例化对象.then .then 会形成链式调用
const p = new Promise((resolve, reject) => {
resolve(); //状态成功时执行.then回调函数
reject(); //状态失败时执行.catch回调函数
});
p.then(() => {
console.log("成功了");
}).catch(() => {
console.log("我失败了");
});
// 过一秒 参数传过去 ‘成功’
const p1 = new Promise((resolve, reject) => {
// console.log("resolve是一个方法", resolve);//ƒ () { [native code] }
setTimeout(() => {
resolve("我成功了");
}, 1000);
}).then((res) => {
console.log("res是resolve成功时传过来的参数", res);
});
</script>
</body>
Promise的链式调用
<body>
<h2>链式调用</h2>
<script src="./lib/axios.js"></script>
<script>
// resolve reject (形参) 名字可以改,但是建议别改
// 实例化对象可以调原型上的方法 可以进行链式调用
// Promise是一个构造函数 p是实例化对象 return Promise实例化对象.then .then 形成链式调用
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("我是1");
}, 1000);
})
.then((res) => {
console.log("1", res);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("我是2");
}, 2000);
});
})
.then((res) => {
console.log("2", res);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("我是3");
}, 3000);
});
})
.then((res) => {
console.log("3", res);
});
</script>
</body>
Promise 提取为方法
<body>
<h2>Promise 提取为方法</h2>
<script>
// 调用方法,即可获取Promise对象
// delay 秒为单位
function Promise1(dalay) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(dalay);
}, dalay * 1000);
});
}
// 当resolve(）才会进入.then
Promise1("1")
.then((res) => {
console.log("res1", res);
return Promise1("2");
})
.then((res) => {
console.log("res2", res);
return Promise1("3");
})
.then((res) => {
console.log("res3", res);
});
</script>
</body>
Promise中的两个方法 Promise.all([p1,p2,p3,p4]) Promise.race（[]）
<body>
<script>
function timeoutPro(delay) {
return new Promise((resolve, reject) => {
// 根据成功 resolve then
setTimeout(() => {
resolve(`延迟了${delay}秒执行`);
}, delay * 1000);
});
}
// 创建多个Promise对象
// p1,p2,p3 Promise对象
const p1 = timeoutPro(2);
const p2 = timeoutPro(3);
const p3 = timeoutPro(1);
const p4 = timeoutPro(9);
Promise.all([p1, p2, p3, p4])
.then((res) => {
{
console.log(res);
}
})
.catch((res) => {
console.log(res);
});
/*
// Promise中的两个方法 Promise.all([p1,p2,p3,p4]) Promise.race（[]）
语法：Promise.all([p1,p2,p3,p4])
1. Promise.all 等待传入的Promise 必须是一个数组,每一项 都完成
2. 每一个Promise then的结果,挨个的设置给res 所有都成功则会走.then 否则有一个不满足条件就走。catch
3. res-->array
// 4. all所有等所有
// */
/*
1. Promise.race（[]） 等待传入的Promise数组,第一个 完成就触发then
2. then中获取到的是 第一个完成Promise对象的then中的值
3. race 竞赛,等第一
*/
Promise.race([p1, p2, p3, p4])
.then((res) => {
console.log(res);
})
.catch((res) => {
console.log(res);
});
</script>
</body>
Promise -all和race方法与接口结合
<body>
<h2>Promise.all和Promise.race结合接口</h2>
<script>
// Promise -all和race方法与接口结合
function myAxios(option) {
// 获取传入的属性
const { url, method = "get", data } = option;
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
// 调用 新闻接口
xhr.open(method, url);
// 设置 请求头 内容格式为JSON
xhr.setRequestHeader("content-type", "application/json");
xhr.addEventListener("load", function () {
// console.log('load:', xhr.response)
// 通过 resolve 将成功的结果传递给then
resolve(JSON.parse(xhr.response));
});
// 发送 JSON
xhr.send(JSON.stringify(data));
});
}
// 1.测试多个接口
// 新闻 图书接口 英雄接口
const p1 = myAxios({
method: "get",
url: "http://ajax-api.itheima.net/api/news",
});
const p2 = myAxios({
method: "get",
url: "http://ajax-api.itheima.net/api/books",
});
const p3 = myAxios({
method: "get",
url: "http://ajax-api.itheima.net/api/robot",
});
Promise.all([p1, p2, p3])
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
Promise.race([p1, p2, p3])
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
</script>
</body>
Promise then的返回值
<body>
<script>
function timeoutPro(delay) {
return new Promise((resolve, reject) => {
// 执行异步
setTimeout(() => {
resolve(delay);
}, delay * 1000);
// 成功 resolve-->then
});
}
//Promise then的返回值
// 无论他内部是否写了return 都是Promise对象
// 可以继续then
// 如果不写return 下一个then中获取到的就是 默认的返回值 undefined
// Promise底层已经处理过了 return 了一个普通的值 也会变为Promise实例化对象
// 一般很少直接返回一个写死的值,一般返回Promise对象居多
const res = timeoutPro(1)
.then((res) => {
console.log(res);
})
.then((res1) => {
console.log(2);
});
</script>
</body>
Promise.reject和catch
<body>
<script>
// Promise.reject和catch
function randomPro() {
return new Promise((resolve, reject) => {
// 延迟 1s
setTimeout(() => {
// 随机数
// Math.random() 0-1的小数
// * 100 控制范围
// parseInt 转整数
const num = parseInt(Math.random() * 100);
if (num > 0 && num < 50) {
resolve("成功啦:" + num);
} else if (num >= 50 && num <= 100) {
reject("失败啦:" + num);
}
}, 1000);
});
}
/*
1. then的第二个参数在失败时触发(如果写了的话)
2. catch的本质 就是调用了then 传递勒第二个参数
*/
randomPro()
.then(
(res) => {
console.log("res:", res);
},
(err) => {
console.log("err:", err);
}
)
.finally(() => {
console.log("成功失败都走");
});
</script>
</body>
Promise的3种状态
<body>
<h2>Promise的状态</h2>
<script>
// Promise的3种状态
function randomPro() {
return new Promise((resolve, reject) => {
// 延迟 1s
setTimeout(() => {
// 随机数
// Math.random() 0-1的小数
// * 100 控制范围
// parseInt 转整数
const num = parseInt(Math.random() * 100);
if (num > 0 && num < 50) {
resolve("成功啦:" + num);
} else if (num >= 50 && num <= 100) {
reject("失败啦:" + num);
}
}, 1000);
});
}
/*
1. then的第二个参数在失败时触发(如果写了的话)
2. catch的本质 就是调用了then 传递勒第二个参数
*/
// 保存下来 方便后续查看
const p = randomPro();
console.log("初始化状态，刚刚实例化"); //pending
p.then((res) => {
console.log(res); //fulfilled
console.log("成功的状态", p);
}).catch((err) => {
console.log(err);
console.log("失败时的状态", p); //rejected
});
</script>
</body>
