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)
基本用法
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);
}
)
会立即执行的
// promise新建后会立即执行
const promise = new Promise(function(resolve,reject){
console.log('promise');
resolve()
})
promise.then(function(){
console.log('resolve');
})
console.log('hello');
配合原生的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>
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);
})
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);
})
