Promise
1.简介
Promise 是异步编程的一种解决方案，比传统的回调函数和事件更合理、更强大
ES6的Promise是一个构造函数, 用来生成Promise实例, Promise实例是异步操作管理者
Promise代表了未来某个将要发生的事件(通常是一个异步操作) 有了Promise对象
可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(回调地狱)
Promise本身还是在使用回调函数(只不过比回调函数多了一种状态管理)
2.使用
1.创建
创建promise对象，实例化Promise
参数是回调函数，内置两个参数，resolve和reject
promise三个状态
初始化状态 pending
成功状态 fullfilled
失败状态 rejected
/*
Promise是一个构造函数 所以说创建promise我们需要实例化
实例化promise内置一个参数 参数是一个回调函数
回调内置两个参数
第一个参数是Promise的成功状态
第二个参数是Promise的失败状态
两个参数其实都是函数
返回的结果是Promise实例
Promise有三种状态
第一种状态 许诺状态 也是初始化状态
第二种状态 成功状态
第三种状态 失败状态
*/
let promise = new Promise((resolve,reject)=>{
// 初始化
let num = 10;
// console.log(resolve());
// console.log(typeof resolve);
// console.log(reject);
// console.log(typeof reject);
// 初始化完毕之后 我们对初始化的条件进行判断
if (num > 10){
// 如果说成功 也就是初始化条件成立 那么我们调用resolve成功状态
// 注意 这是一个函数 所以说调用的时候 别忘了加括号 也可以传递实参
resolve('成功了');
}else{
// 如果失败 调用reject失败状态
// 他也是一个函数 也可以传递实参
reject('失败了')
}
})
2.调用
then ： 触发resolve方法执行then
// 我们定义好了promise之后 我们需要对Promise对象进行触发
// 触发使用Promise对象中的then方法 then方法可以内置一个或者两个参数 都是回调函数
// 第一个回调函数 其实就是resolve函数
// 第二个回调函数 其实就是reject
promise.then((data)=>{
console.log('这是触发Promise' + data);
},(err)=>{
console.log('这是触发Promise' + err);
})
catch ： 触发reject方法执行catch
// 使用异常处理链式调用
let promise = new Promise((resolve,reject)=>{
let num = 10;
if (num > 19){
resolve('成功');
}else{
// console.log(aaa);
reject('失败');
}
})
// 使用then进行触发
// promise.then(data=>console.log(data),err=>console.log(err));
// 我们一般情况下 then中只会出现一个参数 参数是成功
// 失败的情况下 我们会使用catch进行触发
promise.then((data)=>{
console.log(data);
}).catch((err=>{
console.log(err);
}))
// 特点
// let a = promise.then(data=>console.log(data));
// 当我们then触发了Promise之后 我们返回的结果依然是一个promise
// console.log(a);
// a.catch(error=>console.log(error));
3.捕获异常
在使用then的时候是无法捕获异常的，但是在catch中可以捕获异常
try ： 可能出现异常的代码
finally ： 不管会不会发生异常，都会执行finally中的代码
// 异常处理
/*
try ： 可能出现异常的代码
catch ： 如果try出现错误，代码执行catch
finally ： 不管会不会发生异常，都会执行finally中的代码
在程序中 我们通常把可能会出现错误的代码存储在try中
如果说 try中出现了错误 那么不会报错 执行执行catch中的代码
finally 无论代码是否错误 都会执行
*/
// console.log(num);
// let num = 100;
try{
// 如果说num存在报错信息 那么不执行 直接执行catch
console.log(num);
}catch{
// 如果说try中没有报错信息 这里不会执行
console.log('num没有定义 直接执行我');
}finally{
console.log('我都执行');
}
4.链式操作
返回了一个普通的数据(非promise)，这个值会作为参数传递给下一个then的成功回调
返回了一个promise,下一个then的执行，取决于这个promise状态的改变
let promise = new Promise((resolve,reject)=>{
let arr = '获取一级栏目数据';
if (arr.length > 0){
resolve(arr);
}
})
// 触发Promise
// 因为promise触发得到的结果是一个promise对象 所以说 我们可以继续触发
// 前一个then中的回调函数中的返回值 作为新的promise的resolve状态 成功状态
let a = promise.then(data=>{
console.log(data);
return data + '中的食品';
}).then(data=>{
console.log(data);
return data + '中的元宵';
}).then(data=>{
console.log(data);
return data + '只提供一人份';
}).then(data=>{
console.log(data);
return data + '豆沙馅的'
}).then(data=>{
console.log(data);
})
5.其他方法
all ： 执行所有的promise
let p1 = new Promise((resolve,reject)=>{
setTimeout(() => {
console.log('p1');
resolve('这是第一个promise');
}, 3000);
})
let p2 = new Promise((resolve,reject)=>{
setTimeout(() => {
console.log('p2');
resolve('这是第二个promise');
}, 1000);
})
let p3 = new Promise((resolve,reject)=>{
setTimeout(() => {
console.log('p3');
resolve('这是第三个promise');
}, 2000);
})
// 使用Promise中的all方法 执行所有的Promise
// all方法是Promise对象中的静态方法
// 内置一个参数 参数是一个数组 数组中的每个元素是你要执行的所有的promise
// 执行所有的Promise 但是没有顺序
let a = Promise.all([p1,p2,p3]);
// Promise.all([p1,p2,p3]).then(data=>console.log(data));
a.then(d=>console.log(d))
race ： 执行最快的promise
let p1 = new Promise((resolve,reject)=>{
setTimeout(() => {
// console.log('p1');
resolve('这是第一个promise');
}, 3000);
})
let p2 = new Promise((resolve,reject)=>{
setTimeout(() => {
// console.log('p2');
resolve('这是第二个promise');
}, 1000);
})
let p3 = new Promise((resolve,reject)=>{
setTimeout(() => {
// console.log('p3');
resolve('这是第三个promise');
}, 2000);
})
// race方法 执行最快的Promise
// 传参方式和all一样
// 只执行一个Promise 执行速度最快的
let a = Promise.race([p1,p2,p3]);
a.then(d=>console.log(d));
6.封装ajax
<!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">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" id="user">
<input type="button" id="btn" value="搜索">
</div>
</body>
</html>
<script src="./jquery.js"></script>
<script>
// let p1 = new Promise((resolve,reject)=>{
// $.ajax({
// url : './index.PHP',
// type : 'get',
// data : {user : 'Eric'},
// success : (res)=>{
// resolve(res);
// },
// error : (err)=>{
// reject(err);
// }
// })
// })
// p1.then(d=>{
// console.log(d);
// return d;
// }).then(d=>{
// console.log(d);
// $.ajax({
// url : './server.PHP',
// type : 'get',
// data : {user : d},
// success : (res)=>{
// console.log(res);
// }
// })
// })
$('#btn').click(function(){
let search = $('#user').val();
let p = new Promise((resolve,reject)=>{
$.ajax({
url : './index.PHP',
type : 'get',
success : (data)=>{
resolve(data);
}
})
})
p.then(data=>{
let arr = JSON.parse(data);
let result = arr.filter(element=>element.sex == search);
// console.log(result);
return result;
}).then(data=>{
let second = 10;
let result = data.filter(element=>element.age > 10);
console.log(result);
})
})
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
