日期:2021年9月15日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
如果您想了解更多有关javascript
的知识,那么请点《javascript学习的奇妙之旅》
一、Promise初识
说明:
Promise
是ES6
引入的异步编程的新解决方案。语法上Promise
是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。
普通函数写法:
//(1)创建一个 Promise 实例
console.log("(1)定义一个 Promise");
const p = new Promise(function(resolve,reject){
setTimeout(function(){
//(2)“成功”或“失败”,二选一执行
console.log(111);
//(2-1)成功
resolve("Hello Promise ^-^");
//(2-2)失败
// reject("failed -_-");
}, 2000);
});
console.log(222);
console.log(p);
console.log(333);
//(2)调用 then 方法
console.log("(2)调用 then 方法");
p.then(function(value){
console.log(value);
},function(reason){
console.warn(reason);
})
箭头函数写法:
//(1)创建一个 Promise 实例
console.log("(1)定义一个 Promise");
const p = new Promise((resolve,reject) => {
setTimeout(() => {
//(2)“成功”或“失败”,二选一执行
console.log(111);
//(2-1)成功
resolve("Hello Promise ^-^");
//(2-2)失败
// reject("failed -_-");
}, 2000);
});
console.log(222);
console.log(p);
console.log(333);
//(2)调用 then 方法
console.log("(2)调用 then 方法");
p.then(value => {
console.log(value);
},reason => {
console.warn(reason);
})
一个 Promise
必然处于以下几种状态之一:
状态 | 译意 | 说明 |
---|---|---|
pending | 待定 | 初始状态,既没有被兑现,也没有被拒绝 |
fulfilled | 已兑现 | 意味着操作成功完成 |
rejected | 已拒绝 | 意味着操作失败 |
- 状态:已兑现
- 状态:已拒绝
二、Promise封装AJAX
- 普通版AJAX
//CSDN官网:
let url = "https://blog.csdn.net";
//(1)创建对象
const xhr = new XMLHttpRequest();
// console.log(xhr);
//(2)初始化
xhr.open("GET",url);
//(3)发送
xhr.send();
//(4)绑定事件,处理响应结果
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState===4){
if(xhr.status>=200 && xhr.status<300){
//成功
console.log(xhr.response);
}else{
//失败
console.error(xhr.status);
};
}
};
- Promise版AJAX
const p = new Promise((resolve,reject)=>{
//CSDN官网:
let url = "https://blog.csdn.net";
//(1)创建对象
const xhr = new XMLHttpRequest();
// console.log(xhr);
//(2)初始化
xhr.open("GET",url);
//(3)发送
xhr.send();
//(4)绑定事件,处理响应结果
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState===4){
if(xhr.status>=200 && xhr.status<300){
//成功
// console.log(xhr.response);
resolve(xhr.response);
}else{
//失败
// console.error(xhr.status);
reject(xhr.status);
};
}
};
});
//调用
console.log("Start-then");
p.then(value=>{
console.log(value);
},reason=>{
console.error(reason);
});
console.log("End-then");
参考文章:
1、《Web 开发技术》之Promise
2、《ECMAScript 6 入门》之Promise 对象
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/120285005