一、Promise 封装请求
1.封装ajax请求
当执行了reslove函数,会回调promise对象的.then函数
当执行了reject函数,会回调promise对象的.catch函数
==>既成功回调.then方法,失败回调.catch方法
// 1.封装ajax请求
function request(params) {
return new Promise((resolve, reject) => {
/* $.ajax({
url: 'url',
data: 'data',
dataType: 'dataType',
type: 'post',
success: function (res) {
const { flag } = res
if (flag === '402') {
reject(flag) // 请求失败
return
}
resolve(res) // 请求成功
}
}) */
// 下面为模拟返回数据和处理,使用上面注释的部分即可
let res = {
code: '402',
msg: '请求异常',
data: {
name: '小红'
}
}
if (res.code == '401') {
console.log('==========(res.msg)========>>>', res.msg)
reject(res.msg)
return
}
resolve(res.data)
})
}
2.使用封装的ajax请求封装调接口的方法, 并将方法进行封装成Promise,方便后期调用
/* 2.使用封装的ajax请求封装调接口的方法 */
function querydata () {
return request().then( data => {
console.log('==========(data 信息查询成功)========>>>', data)
return Promise.resolve(data)
}).catch(err => {
console.log('==========(信息查询失败!)========>>>')
})
}
/* 3.调用 */
async function init () {
await querydata().then (res => {
console.log('==========(res)========>>>', res)
})
}
init()
二、Promise.all 使用
// 模拟 Promise 返回状态
let p1 = new Promise((resolve, reject) => {
resolve('ok')
})
let p2 = Promise.resolve('Yes')
// let p3 = Promise.resolve('优秀')
let p4 = Promise.reject('失败')
/*
Promise.all 使用:
(1)Promise.all 参数接收一个Promise数组,返回的结果也是Promise;
(2)Promise 状态全部为resolve时执行then(),只要有一个状态为reject就会执行catch();
(3)finally(最后),调用完毕不管成功还是失败都会执行一次finally()方法;
*/
function aa () {
Promise.all([p1, p2, p4]).then(res => {
console.log('==========(res 接口调用成功)========>>>', res)
}).catch(err => {
console.log('==========(接口调用失败!)========>>>', err)
}).finally(() => {
console.log('==========(接口调用完毕)========>>>')
})
}
aa ()