什么是Promise以及Promise封装uni-app小程序api请求

小聪_

已于 2022-02-23 16:40:57 修改

阅读量1.5k

点赞数 1

文章标签： safari linq wpf

于 2022-02-23 10:32:42 首次发布

本文链接：https://blog.csdn.net/Xiaocong__/article/details/122573979

版权

本文介绍了Promise的基本概念及其在异步编程中的作用，展示了如何封装小程序API请求，以及如何使用async和await简化异步操作。通过实例解析了async/await的使用场景，包括解决回调地狱问题、支持并发执行和错误处理。最后，阐述了async/await与Promise的关系，指出它们并不互相替代，而是相辅相成。

摘要由CSDN通过智能技术生成

async和await与promise的关系？

1.什么是Promise

new   Promise是同步执行

.then((=>{

))   是异步回调

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

promise封装小程序api请求

为什么封装api

因为在项目中请求使用的地方会有很多不利于后期维护如果我我们讲api封装出来只需要维护api文件就可以了

这里以uniapp封装api来写小程序为例

第一步

先在项目目录中创建一个utils文件夹在该文件夹下创建一个js文件为请求的封装代码如下

// 封装请求
const http = ({url, method='get', data=''}) => {
	return new Promise((resolve, reject) => {
		uni.request({
			method,
			url: `公共请求地址` + url,
			data,
			success(res) {
				resolve(res.data) // 将请求成功后得到的数据返回出去 可以用then方法接受到数据
			},
			
			fail(err) {
				reject(err) // 将请求失败后返回的信息 返回出去 可以用catch方法接受到
			},
			
			complete() {
				
			}
		})
	})
}

export default http;

第二步

在utils文件夹下创建一个api.js 这里以请求轮播图数据的接口为例

import http from './http.js'

// 请求轮播图数据的接口
export const getSwiper = () => http({url: '你们自己的请求轮播图数据的接口地址'})

第三步

在需要使用轮播图接口的文件中

	import { getSwiper } from '../../utils/api.js'
	export default {
		data() {
			return {
				swiper: []
			}
		},
		async created() {
			let {message} = await getSwiper() // message就是我们请求完成后获取的数据信息
			this.swiper = message
		},
	}

async和await

什么是async和await

async 定义异步函数
自动把函数转换为promise
当调用异步函数时，函数返回值会被resolve处理
异步函数内部可以使用await
await 暂停异步函数的执行
当使用在promise 前面是，await等待promise完成，并返回promise的结果
await只能和promise一起使用，不能和callback一起使用
await只能和async函数中使用，【async和await两者必须搭配使用】

async 和 await 的使用场景：

解决了 promise 中的点 then 链

我们原始的写法

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 200，这个值将用于下一步骤
 */
function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

现在我们使用promise来实现

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

现在使用async和await来实现

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();

小结：
使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性。
Async Await 的优点：
1、解决了回调地狱的问题
2、支持并发执行
3、可以添加返回值 return xxx;
4、可以在代码中添加try/catch捕获错误