Promise对象下的方法

最新推荐文章于 2024-01-03 09:25:16 发布

原创最新推荐文章于 2024-01-03 09:25:16 发布 · 211 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#es6

本文详细介绍了JavaScript中Promise的使用方法，包括基本的resolve和reject，错误捕获的catch方法，以及并行处理的all和race方法。同时，深入探讨了async函数如何简化异步编程，提高代码可读性和维护性。

请求接口，拿到数据：

new Promise((resolve,reject)=>{
    setTimeout(()=>{
        let data ={
            state: "200",
            isState:"ok",
            data:{
                code: 1
            }    
        }
        resolve(data);
    },1000);
}).then((data)=>{
    // if(data.state == "200"){
		// 拿到数据后想做什么
    // }
    return data.data;
}).then((data)=>{
    console.log(data);
});

reject()与resolve()：

new Promise((resolve,reject)=>{
    reject(1);
}).then(()=>{
    console.log(1);
    //return Promise.reject(); 
    // 不需要处理异步的业务，直接返回一个状态为reject的Promise对象
    
   // return Promise.resolve(); 
   // 不需要处理异步的业务，直接返回一个状态为resolvet的Promise对象
});

ctach()：
作用： 捕获前边所有的 Promise中出现的错误，统一处理

 new Promise((resolve,reject)=>{
  //   resolve();
    reject();
 }).then(()=>{
     console.log(1);
 }).then(()=>{        
    console.log(2);
 }).then(()=>{
    console.log(1);
 }).catch((err)=>{    
    console.log("请求出现错误" + err);
 });

all方法：
作用： 会等指定的Promose对象，全部执行结束后，才执行

let p1 = new Promise((resolve) => {
    setTimeout(() => {
        console.log(1);
        resolve();
    }, 10);
});
let p2 = new Promise((resolve) => {
    setTimeout(() => {
        console.log(2);
        resolve();
    }, 1000);
});
let p3 = new Promise((resolve) => {
    setTimeout(() => {
        console.log(3);
        resolve();
    }, 3000);
});
Promise.all([p1,p2,p3]).then(()=>{
    console.log(4);
});

race：
作用：
Promise.race方法类似将多个Promise包装成一个新的Promise实例
但是其中有一项的状态发生改变新的实例的状态就会随着改变

let p1 = new Promise((resolve) => {
    setTimeout(() => {
        console.log(1);
        resolve();
    }, 10);
});
let p2 = new Promise((resolve) => {
    setTimeout(() => {
        console.log(2);
        resolve();
    }, 1000);
});
let p3 = new Promise((resolve) => {
    setTimeout(() => {
        console.log(3);
        resolve();
    }, 3000);
});
Promise.race([p1,p2,p3]).then(()=>{
   console.log(4)
})

async：
作用： 是一个异步的函数
把异步的处理机制，写成接近同步的处理机制，以增加代码的可读性，降低版本迭代的难度

	async function fn(){
        try{  
           let n1 = await new Promise((resolve)=>{
                setTimeout(() => {
                    resolve();
                    console.log(1);
                },1000); 
             });

           let n2 = await new Promise((resolve)=>{
                setTimeout(() => {
                    resolve();
                    console.log(2);
                },1000); 
             });

           let n3 = await new Promise((resolve)=>{
                setTimeout(() => {
                    resolve();
                    console.log(3);
                },1000); 
             });

            }catch(err){
                console.log(err);
            }
        }