javaScript-promise
Posted guardwhy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript-promise相关的知识，希望对你有一定的参考价值。
1.1 什么是promise?
promise是ES6中新增的异步编程解决方案, 在代码中的表现是一个对象。
promise作用
企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套。
如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低。
promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1.使用setTimeout
// setTimeout(() => {
// console.log('Hello World');
// }, 1000)
// 什么情况下会用到Promise?
// 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
// new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数)
// 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
new Promise((resolve, reject) => {
setTimeout(() => {
// 成功的时候调用resolve
// resolve('Hello World')
// 失败的时候调用reject
reject('error message')
}, 1000)
}).then((data) => {
// 1.100行的处理代码
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
}).catch((err) => {
console.log(err);
})
</script>
</body>
</html>
执行结果
1.2 如何创建Promise对象
可以通过new Promise(function(resolve, reject){ });promise对象不是异步的, 只要创建promise对象就会立即执行存放的代码。
promise对象是通过状态的改变来实现的, 只要状态发生改变就会自动触发对应的函数。
<!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></title>
</head>
<body>
<script>
/*什么情况下会用到Promise?
一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数)
在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
*/
new Promise((resolve, reject) =>{
setTimeout(() =>{
// 1.成功的时候调用resolve
// resolve("hello Vue.js!!!!")
// 2.失败的时候调用reject
reject('error message')
}, 1000)
}).then(data =>{
console.log(data);
},err =>{
console.log(err);
})
</script>
</body>
</html>
执行结果
1.3 Promise对象三种状态
- pending: 默认状态，只要没有告诉promise任务是成功还是失败就是pending状态。
- fulfilled(resolved): 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功。
- rejected: 只要调用rejected函数, 状态就会变为rejected, 表示操作失败。
三种状态注意点
状态一旦改变既不可逆, 既从pending变为fulfilled, 那么永远都是fulfilled。既从pending变为rejected, 那么永远都是rejected。
<!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>
<script>
/*什么情况下会用到Promise?
一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数)
在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
*/
new Promise((resolve, reject) =>{
// 第一次网络请求的代码
setTimeout(() =>{
resolve()
},1000)
}).then(() =>{
// 第一次拿到结果的处理代码
console.log("hello Vue.js!!!!");
console.log("hello Vue.js!!!!");
console.log("hello Vue.js!!!!");
return new Promise((resolve, reject) =>{
// 第二次网络请求
setTimeout(() =>{
resolve()
}, 1000)
})
}).then(() =>{
// 第二次拿到结果的处理代码
console.log("hello python！！！");
console.log("hello python！！！");
console.log("hello python！！！");
console.log("hello python！！！");
return new Promise((resolve, reject) =>{
// 第三次网络请求
setTimeout(() =>{
resolve()
})
})
}).then(() =>{
// 第二次拿到结果的处理代码
console.log("hello javascript！！！");
console.log("hello javaScript！！！");
console.log("hello javaScript！！！");
console.log("hello javaScript！！！");
})
</script>
</body>
</html>
1.4 链式调用简写
可以将数据直接包装成Promise.resolve，那么在then中可以直接返回数据。
<!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>
<script>
new Promise((resolve, reject) =>{
setTimeout(() =>{
resolve('111')
},1000)
}).then(res =>{
// 1.自己处理该行代码
console.log(res, '第一次拿到结果的处理代码')
// 2.对结果进行第一次处理
// return Promise.resolve(res + '111');
// return Promise.reject('error message')
// 3.简写
throw 'error message'
}).then(res =>{
console.log(res, '第二次拿到结果处理代码')
return Promise.resolve(res + '222')
}).then(res =>{
console.log(res, "第三次拿到结果处理代码")
}).catch(err =>{
console.log(err);
})
</script>
</body>
</html>
执行结果
1.5 Promise的all静态方法
- all方法接收一个数组,如果数组中有多个Promise对象,只有都成功才会执行then方法。
- 并且会按照添加的顺序, 将所有成功的结果重新打包到一个数组中返回给我们。
- 如果数组中不是Promise对象, 那么会直接执行then方法。
<!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>
<script>
Promise.all([
new Promise((resolve, reject) =>{
setTimeout(() =>{
resolve({name:'guardwhy', age:18})
},2000)
}),
new Promise((resolve, reject) =>{
resolve({name: 'James', age:'33'})
}, 1000)
]).then(results =>{
console.log(results);
})
</script>
</body>
</html>
执行结果
以上是关于javaScript-promise的主要内容，如果未能解决你的问题，请参考以下文章