Promise 封装请求,Promise.all 使用

一、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 ()

猜你喜欢

转载自blog.csdn.net/weixin_46447120/article/details/125394392