https://blog.csdn.net/u012045958/article/details/80635151
https://www.jianshu.com/p/7e60fc1be1b2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#outer{
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: #333;
}
#inner{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner" class="xihuan">11111</div>
</div>
</body>
</html>
<script>
var p = new Promise(function(resolve, reject){
console.log("create a promise--1"); // 这是传参数，是立即执行的；
resolve("success--2");
});
console.log("after new Promise--3");
p.then(function(value){
console.log(value);
});
// 答案输出， 1，3，2 ；
// promise ajax 异步请求
/*
定义一个使用promise的ajax请求,这里依赖jquery
参数中请求url为必填参数
*/
// const ajaxPromise= param => {
// return new Promise((resovle, reject) => {
// $.ajax({
// "type":param.type || "get",
// "async":param.async || true,
// "url":param.url,
// "data":param.data || "",
// "success": res => {
// resovle(res);
// },
// "error": err => {
// reject(err);
// }
// })
// })
// }
// let step1 = () => {
// ajaxPromise({
// "url":"",
// }).then(res => {
// console.log("第一个请求正确返回==>"+res);
// step2(res);
// }).catch(err => {
// console.log("第一个请求失败");
// })
// }
/*
第二个请求
*/
// let step2 = (res) => {
// ajaxPromise({
// "type":"get",
// "url":"",
// "data":{"name":res}
// }).then(res => {
// console.log("第二个请求正确返回==>"+res);
// }).catch(err => {
// console.log("第二个请求失败==>"+err);
// })
// }
// step1()
// 模拟使用setTimeout模拟异步请求；先获取账号，再获取详情
// 完成的例子 如下；
function start() {
return new Promise((resolve, reject) => {
resolve('1111');
});
};
start()
.then(data => {
console.log('第一次', data);
return Promise.resolve(1); // p1
}).then(data => {
// promise p1
console.log('result of p1: ', data);
return Promise.reject(2); // p2
}).then(data => {
// promise p2
console.log('result of p2: ', data);
return Promise.resolve(3); // p3
})
.catch(ex => {
// promise p3
console.log('ex: ', ex);
return Promise.resolve(4); // p4
})
.then(data => {
// promise p4
console.log('result of p4: ', data);
});
// 完整的例子 3
// ⑴． resolved（全部置为完成状态）
// ①.初始化：比如说以国家，省份，县市（china ，jiangshu ，xian）三个方法来演示下链式调用关系（采用setTimeout模拟异步操作）
function china(){
console.log('china中国')
var p =new Promise(
function( resolve,reject ) {
setTimeout(function(){
console.log('中国 国家')
resolve('教育大省份')
},1000)
}
)
return p;
}
function jiangshu(data){
console.log('江苏'+data);
var p=new Promise(function(resolve,reject){
setTimeout(function (){
console.log('江苏 省份')
resolve('地级市');
},2000)
})
return p;
}
function xian(data){
console.log('盱眙县'+data)
var p=new Promise(function(resolve,reject){
setTimeout(function(){
console.log('盱眙县');
resolve ('淮河镇')
},2000)
})
return p;
}
// 函数写完之后，就开始结合then来链式调用了
china()
.then(function(data){returnjiangshu(data)})
.then(function(data){returnxian(data)})
.then(function(data){console.log(data)})
//简化写法：
china ().then(jiangshu).then(xian).then(function(data){
console.log(data)
})
//2． rejected（部分置为无效状态）
//①.初始化：同样的以上述的函数为例
function china(){
console.log('china中国')
var p =new Promise(
function( resolve,reject ) {
setTimeout(function(){
console.log('中国 国家')
reject('教育大省份')
},1000)
}
)
return p;
}
function jiangshu(data){
console.log('江苏是'+data);
varp=new Promise(function(resolve,reject){
setTimeout(function(){
console.log('江苏 省份')
resolve('地级市');
},2000)
})
returnp;
}
// ②. 函数写完之后，就开始结合then来链式调用了
china()
.then(jiangshu,function(data){ console.log(data)})
//等同于（null不执行）
china()
.then(null,function(data){ console.log(data)})
// 等同于（直接执行catch回调，抛出异常，页面也不会卡死，直接走catch）
china()
.then(jiangshu).catch(function(data){console.log(data)})
//(备注：为reject的时候，执行then的第二个参数回调，不会执行jiangshu)
// ③. 查看控制台输出：
</script>
