创建一个promise对象
let promise = new Promise((resolve,reject)=>{
// resolve 代表的是成功的回调函数
// reject 代表的是失败的回调函数
});
//打印promise
console.log(promise);
resolve 和 reject 回调函数由谁提供？
在promise原型里有then和catch方法，resolve由then方法提供，reject由catch方法提供。
then方法表示的是成功之后的回调；catch方法表示的是失败之后的回调。
模拟异步请求
let promise = new Promise((resolve, reject) => {
// 模拟异步请求
if (3 > 2) {
resolve('success')
} else {
reject('error')
}
});
// 实例方法
promise.then(
// 执行的是成功的回调函数
(res) => {
console.log(res, '请求成功');
}
).catch(
// 执行的是失败的回调函数
(err) => {
console.log(err, '请求失败');
}
).finally(() => {
console.log('最终执行');
});
promise示例
let p1 = new Promise(function (resolve, reject) {
if (1 > 0) {
resolve("成功");
} else {
reject("失败");
}
})
p1.then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
let data = '用户的数据';
resolve(data); //调用resolve之后，对象状态变为成功
// reject('数据读取失败');
}, 1000);
})
p2.then((res) => {
console.log(res, '成功');
}, (err) => {
console.log(err, '失败');
})
promise写法
let promise = new Promise((resolve, reject) => {
if (res) {
resolve(res);
} else {
reject(err);
}
})
promise.then((res) => {
console.log(res);
}).catch((err) => {
console.log(err)
})
封装promise
//考虑到可能有多个请求需要发送，需要创建多个承诺对象，所以采用工厂函数进行封装
function getPromise(url,method='get',data=null){
return new Promise((resolve,reject)=>{
$.ajax({
url:url,
method:method,
data:data,
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
})
}
let p1=getPromise('url');
let p2=getPromise('url');
// p1.then((res)=>{
// console.log(res,'1111111')
// })
// p2.then((res)=>{
// console.log(res,'222222')
// })
// all 只有两个异步操作请求都成功才会返回成功的结果，否则返回失败对象
// race 谁的响应先拿到用谁的结果 无论成功与否
//any 有成功用成功的，都失败就失败
let p=Promise.any([p1,p2]);
p.then((res)=>{
console.log(res)
}).catch((err)=>{
console.log(err)
})
async函数返回值
async使用：等待一个函数执行完毕后，执行另外一个函数。
function testAwait() {
return new Promise((resolve) => {
setTimeout(function () {
console.log("testAwait");
resolve();
}, 1000);
});
}
async function helloAsync() {
await testAwait();
console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync
async await和promise的对比
getJSON = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('返回的数据')
},200)
})
}
// 使用Promise
const makeRequest = () =>
getJSON()
.then(data => {
console.log(data)
return "done"
})
makeRequest()
// 使用async await
const makeRequest = async () => {
console.log(await getJSON())
return "done"
}
makeRequest()
使用try、catch和finally来捕获异常
try {
console.log("try")
} catch (error) {
// console.log(error);
throw new Error('请求失败')
} finally {
console.log('最终都会执行');
}
对原生ajax进行封装
function promise(method, url) {
return new Promise((resolve, reject) => {
// 创建XMLHttpRequest的实例对象
let xhr = new XMLHttpRequest();
// 打开一个连接
xhr.open(method, url);
// 发送请求
xhr.send();
// 接收响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 代表请求成功
resolve(xhr.responseText)
} else {
// 代表请求失败
reject(xhr.responseText)
}
}
}
})
}
let p1 = promise('get', 'https://api.muxiaoguo.cn/api/lishijr?api_key=51247282aed5c8dc');
let p2 = promise('get', 'https://api.muxiaoguo.cn/api/xiaohua?api_key=fd3270a0a9833e20');
p1.then(res => {
console.log(res, '获取响应1');
});
p2.then(res => {
console.log(res, '获取响应2');
});
Promise中的静态方法（只能由构造函数本身去调用）// 实例全部成功返回一个承诺对象
all(); 实例状态全部成功，返回的承诺对象状态才是成功
any(); 实例状态任意一个成功，返回的承诺对象状态就是成功
race(); 实例状态返回请求先成功的那一个
allSettled(); 返回全部处理实例
let res = Promise.all([p1, p2]);
console.log(res);
// 任意一个实例状态成功返回成功的实例
let res1 = Promise.any([p1, p2]);
console.log(res1);
// race 赛跑 返回请求先成功的实例对象
let res2 = Promise.race([p1, p2]);
console.log(res2);
// 返回的处理格式 array:[{},{}]
let res4 = Promise.allSettled([p1, p2]);
console.log(res4);
res4.then(res => {
console.log(res);
})