01.promise基本操作
<!--
Created by wangyang on 2019-05-22.
itwangyang@gmail.com
http://www.itwangyang.xyz
-->
<!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, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--所有的IE都起作用：-->
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
</head>
<body>
<script>
/*
为什么要有promise：解决（回调地狱）的问题
回调地狱：
//跟以前的if条件地狱很像
// if(){
// if(){
// if(){
// }
// }
// }
$.get("/getUser",function(res){
$.get("/getUserDetail",function(){
$.get("/getCart",function(){
$.get("/getBooks",function(){
//...
})
})
})
})
//node开发：读取文件；开个服务器、接收一个请求、请求路径、访问数据库
* */
//把异步操作封装在一个promise对象中
function fn() {
return new Promise(function (resolve,reject) {
setTimeout(()=> {
console.log("您好");
//其实异步逻辑，到这款其实已经执行完毕了，就可以告诉外界，可以执行其他操作了，如果让外界得知？
resolve();
},1000)
})
}
//调用了这个函数，
fn().then(res =>{
//执行到下一步
console.log("下一步");
fn().then(res=>{
console.log("执行第二步")
})
})
//输出顺序：
//你好
//下一步
//你好
//执行第二步
</script>
</body>
</html>
02-1.promise如任何解决回调地狱的
<!--
Created by wangyang on 2019-05-22.
itwangyang@gmail.com
http://www.itwangyang.xyz
-->
<!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, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--所有的IE都起作用：-->
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
</head>
<body>
<script>
function f1() {
return new Promise(resolve => {
setTimeout(()=>{
console.log("第一步");
//异步逻辑已经执行完，必须要告诉外界我执行完了
resolve();
},1000)
})
}
function f2() {
return new Promise(resolve => {
setTimeout(()=>{
console.log("第二步");
//异步逻辑已经执行完，必须要告诉外界我执行完了
resolve();
},1000)
})
}
f1().then(res=>{
//返回一个新的promise对象，然后链式调用then方法
return f2();
}).then(res=>{
return f1();
}).then(res=>{
return f2();
}).then(res=>{
console.log("结束");
})
/*
Promise函数基本用法
var promise=new Promise((resolve,reject)=>{
//b 把需要执行的异步操作放在这里
$.get("/getUser",res=>{
//获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了
//c、
resolve(res)
//而执行的下一步操作，其实就是写在then的回调函数中的
})
})
//a、
promise.then(res=>{
//d、执行后续的操作
console.log(res);
})
*/
</script>
</body>
</html>
03-2.promise传参
<!--
Created by wangyang on 2019-05-22.
itwangyang@gmail.com
http://www.itwangyang.xyz
-->
<!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, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--所有的IE都起作用：-->
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
</head>
<body>
<script>
function getUser() {
return new Promise(resolve => {
$.get("/getUser",res=>{
//res是从服务端中接收到的数据
//把数据传到下一步操作中
//告诉外界本次的异步操作已经执行完毕了
resolve(res);
});
})
}
getUser().then(res=>{
//res就表示上一个异步操作返回的参数值：从服务器中获取的数据
})
</script>
</body>
</html>
03-3 promis错误处理
<!--
Created by wangyang on 2019-05-22.
itwangyang@gmail.com
http://www.itwangyang.xyz
-->
<!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, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--所有的IE都起作用：-->
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
</head>
<body>
<script>
function getBook() {
return new Promise((resolve,reject) => {
$.ajax({
url:'/getBook',
success(res){
//成功获取数据
resolve(res);//resolve();表示异步操作是成功的
},
error(resError){//res表示错误信息
//如果失败就会执行
reject(resError);//reject();表示异步操作是失败的
}
});
})
}
/* //第一种处理错误的方式
getBook().then(res=>{
//这里的res是表示请求成功时候获取到的数据
},resError=>{
console.log(resError);
});
*/
//第二种处理错误的方式
getBook().then(res=>{
//成功了
}).catch(res=>{
//这里也可以获取到错误信息
})
//上面2种错误处理的方式，第二种更加推荐
//第二种方式更强大的地方在于：
//a、不仅仅可以捕获到reject传递的参数
//b、还可以捕获到：成功的回调中发生的错误
</script>
</body>
</html>
04-4.promise捕获错误
<!--
Created by wangyang on 2019-05-22.
itwangyang@gmail.com
http://www.itwangyang.xyz
-->
<!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, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--所有的IE都起作用：-->
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
</head>
<body>
<script>
function f1(name) {
return new Promise((resolve,reject) => {
setTimeout(()=>{
if (name == "a"){
resolve("成功");
} else {
reject("失败");
}
},1000)
})
}
// f1("a").then(res=>{console.log(res)});
f1("b").then(res=>{
console.log(res)
}).catch(res=>{
console.log("失败了");
})
</script>
</body>
</html>
05-5.promise多层异步使用catch
<!--
Created by wangyang on 2019-05-22.
itwangyang@gmail.com
http://www.itwangyang.xyz
-->
<!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, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--所有的IE都起作用：-->
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
</head>
<body>
<script>
new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log("第一步");
resolve("第一步完成");
},100)
}).then(res=>{
console.log(res);
return new Promise((resolve, reject) => {
setTimeout(()=>{
console.log("第二步");
reject("第二步失败");
},100)
})
}).then(res=>{
console.log(res);
console.log("不会执行到这里");
}).catch(res=>{
console.log(res);
console.log("失败");
});
//fetch是新浏览器自带的。。。。。。。。。。。。。。。。
//axios就是一个基于Promise封装出来的进行ajax请求的库
axios.get("/getUser").then(res=>{
return axios.get("/getUserDetail");
})
</script>
</body>
</html>
06-6.promise里面的返回值
<!--
Created by wangyang on 2019-05-22.
itwangyang@gmail.com
http://www.itwangyang.xyz
-->
<!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, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--所有的IE都起作用：-->
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
</head>
<body>
<script>
new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("第一步");
},1000)
}).then(res=>{
return 100;
}).then(res=>{
console.log(res);
})
</script>
</body>
</html>
promise,暂时写到这些，目前就是用到这些
