在ES6中引入了Promise,它是一种用于处理异步操作的对象。下面是关于ES6中Promise的关键要点的Markdown总结:
Promise
Promise是ES6中引入的一种处理异步操作的机制,它代表了一个异步操作的最终完成或失败,并会返回一个对应的结果或错误。
创建Promise
const myPromise = new Promise((resolve, reject) => {
// 异步操作
// 当操作成功时,调用 resolve() 并传递结果
// 当操作失败时,调用 reject() 并传递错误信息
});
处理Promise的结果
myPromise
.then(result => {
// 操作成功的处理逻辑
})
.catch(error => {
// 操作失败的处理逻辑
});
Promise的状态
pending
:初始状态,既不是成功也不是失败状态。fulfilled
:操作成功完成。rejected
:操作失败。
Promise的特点
- Promise一旦处于
fulfilled
或rejected
状态,将永远保持这个状态,不会改变。 - Promise的状态一旦改变,就会触发相应的回调函数。
- Promise可以链式调用,通过
.then()
方法处理成功的情况,通过.catch()
方法处理失败的情况。
Promise.all()
Promise.all([promise1, promise2, ...])
.then(results => {
// 所有Promise都成功完成时的处理逻辑,results是一个包含所有结果的数组
})
.catch(error => {
// 任意一个Promise失败时的处理逻辑
});
Promise.race()
Promise.race([promise1, promise2, ...])
.then(result => {
// 第一个完成的Promise的处理逻辑,result是第一个完成的结果
})
.catch(error => {
// 任意一个Promise失败时的处理逻辑
});
这些是关于ES6中Promise的一些基本概念和用法的总结。Promise提供了一种更简洁和可读性更高的方式来处理异步操作,可以帮助我们更好地组织和管理异步代码。
封装ajax
function ajax(options) {
const {
// 请求的方式
type,
// 请求的路径
url,
// 返回的数据类型
dataType = 'json',
// 前端携带数据
data = {},
// 是否异步
async = true
} = options;
// 参数的判断 。。。。。。
if (type !== 'get' && type !== 'post') { // 不区分大小写 。。。
throw new Error('请求方式只能是get或者post');
}
// .....
// 判断data必须是obj
// 判断async是布尔值
// 判断success是函数
// 把data对象转字符串
let params = '';
for (let key in data) {
params += `${key}=${data[key]}&`;
}
params = params.substring(0, params.length - 1);
const p = new Promise(resolve => {
// 请求
const xhr = new XMLHttpRequest();
// 判断方式
if (type === 'get') {
xhr.open(type, url + '?' + params, async);
xhr.send();
}
else {
xhr.open(type, url, async);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(params);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let res = xhr.responseText;
if (dataType === 'json') {
res = JSON.parse(res);
}
resolve(res);
}
}
})
return p
}