(精华)2020年7月5日 JavaScript高级篇 ES6(Promise)
【摘要】
Promise 是什么
是一种异步解决的方案 比es5传统的解决异步的方案（回调函数） es6提供了promise对象
以前处理异步的方式
// 后者要等待前者执行的结果 f2 要等待 f1执行完
...
Promise 是什么
是一种异步解决的方案 比es5传统的解决异步的方案（回调函数）
es6提供了promise对象
以前处理异步的方式
// 后者要等待前者执行的结果 f2 要等待 f1执行完
function f1(callback){
setTimeout(()=>{
var res = 'f1'
console.log('我先执行从后台获取到了f1');
callback(res)
},1000)
}
function f2(value){
console.log(value);
}
f1(f2)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
基本用法
const promise = new Promise(function(resolve,reject){
setTimeout(()=>{
var flag = false;
flag ? resolve('成功') : reject('失败')
},1000)
})
promise.then(
(res)=>{console.log(res)},
(res)=>{console.log(res);
}
)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
会立即执行的
// promise新建后会立即执行
const promise = new Promise(function(resolve,reject){
console.log('promise');
resolve()
})
promise.then(function(){
console.log('resolve');
})
console.log('hello');
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
配合原生的ajax实现案例
<!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>peomise案例</title>
</head>
<body>
<script>
const getJson = function (url) {
return new Promise(function (reslove, reject) {
const handel = function () {
// 能不能想到一个关键数字
if (this.readyState !== 4) {
return
}
if (this.status === 200) {
// 成功的结果
reslove(this.response)
} else {
// 失败的结果
reject(new Error(this.statusText))
}
}
const client = new XMLHttpRequest()
client.open("GET", url)
client.onreadystatechange = handel
client.responseType = 'json'
client.setRequestHeader('Accept', 'application/json')
client.send()
})
}
getJson(`http://127.0.0.1:2000/name`).then(
// 成功的
// 拿到结果后爸第一项的id传递给后台 后台根据id返回对应的 人物武器的名字
(res) => {
console.log(res);
const id = res.data[2].id
return getJson(`http://127.0.0.1:2000/wepon?id=${id}`)
}
).then((res) => {
console.log(res)
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
Promise.then()
.then方法是定义在原型上的 Promise.prototype
.then之后会返回一个新的promise对象
Promise.catch()
// promise 会吃掉错误
// 建议用到promise的时候后面一般加上catch捕捉
const say = function(){
return new Promise(function(resolve,reject){
resolve(v+2)
})
}
say().then(()=>{
console.log('我是处理后的');
}).catch(
(error)=>{
console.log(error)
return '123'
}
).then((res)=>{
console.log(res);
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
Promise.all()
// Promise.all
// 一次性处理多个promise 生成一个新的promise
// Promise.all(p1,p2)
let promise1 = new Promise(function(resolve,reject){
// resolve('promise11')
reject('promise11')
})
let promise2 = new Promise(function(resolve){
resolve('promise22')
})
Promise.all([promise1,promise2]).then(function(res){
console.log(res);
}).catch((res)=>{console.log(res);
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/107135707
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）