js中promise方法

在JavaScript中，Promise 对象代表了一个异步操作的最终完成（或失败）及其结果值。Promise 提供了 .then()、.catch() 和 .finally() 方法来处理异步操作成功、失败和最终完成的情况。

Promise 语法基础

创建Promise

使用 new Promise(executor) 语法创建一个新的Promise实例。executor 是一个在Promise构造函数被调用时立即执行的函数，它接受两个函数作为参数：resolve 和 reject。这两个函数是Promise API的一部分，用于将Promise的状态从"pending"（进行中）更改为"fulfilled"（已成功）或"rejected"（已失败）。

let promise = new Promise(function(resolve, reject) {
// 异步操作
if (/* 异步操作成功 */) {
resolve(value); // 将Promise的状态更改为fulfilled，并将结果值传递给.then()
} else {
reject(error); // 将Promise的状态更改为rejected，并将错误值传递给.catch()
}
});

使用.then()

.then() 方法接收两个可选参数：onFulfilled 和 onRejected。这两个参数都是函数，分别对应Promise成功和失败的情况。

javascript
promise.then(
function(value) { // onFulfilled
// 处理成功的情况
console.log(value);
},
function(error) { // onRejected（可选）
// 处理失败的情况
console.error(error);
}
);

注意：为了代码的简洁性和可读性，通常只提供 onFulfilled 函数，并使用 .catch() 来捕获错误。

使用.catch()

.catch() 方法返回一个新的Promise，并处理被拒绝的Promise。它只接收一个参数，即错误处理函数。

javascript

promise.then(function(value) {
// 处理成功的情况
}).catch(function(error) {
// 处理失败的情况
console.error(error);
});

使用.finally()

.finally() 方法返回一个Promise。在Promise最终完成（无论是成功还是失败）时，.finally() 中的回调函数都会被执行。这为清理或执行不依赖于Promise解决情况的任务提供了便利。

javascript
promise.then(function(value) {
// 处理成功的情况
}).catch(function(error) {
// 处理失败的情况
}).finally(function() {
// 无论成功或失败都会执行
console.log('Promise已完成（无论成功还是失败）');
});

示例

下面是一个使用Promise的简单示例，它模拟了一个异步操作，并在操作完成后打印结果或错误。

javascript
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// 假设异步操作成功
const data = 'Hello, Promise!';
resolve(data);

// 如果需要模拟失败，可以取消注释以下代码

异步请求

    let arrs=ref([])
    // 方法一: success的写法容易产生回调地狱，比如获取到分类后，获取内容，获取内容成功后获取评论……
    uni.request({
        url:"https://jsonplaceholder.typicode.com/posts",
        success: (res) => {
            console.log(res)
            arrs.value=res.data
        }
    })
    //回调地狱演示
    setTimeout(()=>{
        console.log("等待3秒");
        setTimeout(()=>{
            console.log("再等3秒");
            setTimeout(()=>{
                console.log("又等3秒");
            },3000);
        },3000);
    },3000)
    //方法二 Promise链式调用
    function getUrl(){
        let p= new Promise((resolve,reject)=>{
            uni.request({
                url:"https://jsonplaceholder.typicode.com/posts",
                success:res=>{
                    resolve(res)
                },
                fail:err=>{
                    reject(err)
                }
            })
        })
        return p
    }
    function getList(id){
        return new Promise((resolve,reject)=>{
            uni.request({
                url:"https://jsonplaceholder.typicode.com/posts",
                data:{
                    userId:id
                },
                success:res=>{
                    resolve(res)
                },
                fail:err=>{
                    reject(err)
                }
            })
        })

    }
    getUrl().then(res=>{
        let id=res.data[1].userId;
        return getList(id)
    }).then(res=>{
        console.log(res)
    }).catch(err=>{
        console.log(err);
    })
    //上述有嵌套关系,若无嵌套关系,等请求成功全部显示可以使用promise.all()
    Promise.all([getUrl(),getList(id)].then(res=>{
        console.log(res)
    }))


    //方法三:async/await 目前最常用方式
    async function test(){
        let id,res
        res=await getUrl();
        id=res.data[1].userId;
        res=await getList(id);
        console.log(res)
        return 
    }