Promise简介

最新推荐文章于 2024-09-10 21:56:49 发布

林小鹅

最新推荐文章于 2024-09-10 21:56:49 发布

阅读量790

点赞数 3

分类专栏： vue 文章标签： vue es6 vue.js

本文链接：https://blog.csdn.net/xiaolingshi_/article/details/109366565

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了Promise在处理异步操作时的应用，包括其构造函数、链式调用、状态管理以及错误处理。通过实例展示了如何使用Promise进行多级网络请求的封装，并解释了Promise.all()方法用于同时处理多个异步请求的情况。此外，还讨论了在实际开发中如何优化异步代码，提高代码的可读性和维护性。

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

Promise

在这里插入图片描述

什么情况下会用到Promise

一般情况下是有异步操纵时，使用Promise对这个异步操作进行封装

new ->构造函数（1.保存了一些状态信息2.执行传入的函数）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    // 1.使用setTimeout
    // setTimeout(() => {
    //     console.log('hhh')
    // },1000)
    //参数 -> 函数

    //链式编程
    // new Promise((resolve, reject) => {
    //     //1.第一次网络请求的代码
    //     setTimeout(() => {
    //         resolve()
    //         //一旦调用resolve就会跳到then
    //     }, 1000)
    // }).then(()=>{
    //     //第一次拿到结果的处理代码
    //     console.log('Hello World')
    //     console.log('Hello World')
    //     console.log('Hello World')
    //     console.log('Hello World')
    //     //第二次网络请求的代码
    //     return new Promise((resolve,reject)=>{
    //         setTimeout(()=>{
    //             resolve()
    //         },1000)
    //     })
    // }).then(()=>{
    //     //第二次处理的代码
    //     console.log('Hello Vue')
    //     console.log('Hello Vue')
    //     console.log('Hello Vue')
    //     console.log('Hello Vue')

    //     return new Promise((resolve,reject)=>{
    //         //第三次网络请求的代码
    //         setTimeout(()=>{
    //             resolve()
    //         },1000)
    //     })
    // }).then(()=>{
    //     //第三次处理的代码
    //     console.log('Hello js')
    //     console.log('Hello js')
    //     console.log('Hello js')
    //     console.log('Hello js')

    // })

    new Promise((resolve,reject)=>{
        setTimeout(()=>{
            //成功的时候调用reslove
            resolve('Hello World')
            //失败的时候调用reject
            reject('erro message')
        },1000)
    }).then((data) =>{
        console.log(data)
        console.log(data)
        console.log(data)
        console.log(data)
        console.log(data)
    }).catch((err)=>{
        console.log(err)
    })

    
</script>

Promise的三种状态和另外的处理方式

sync->同步
async->异步

另外的处理方式

成功的时候调用reslove
失败的时候调用reject
Promise的链式调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //wrapped into
   //网络请求：aaa ->自己处理
   //处理：aaa 111 ->自己处理
   new Promise((resolve,reject)=>{
       setTimeout(()=>{
           resolve('aaa')
       },1000)
   }).then(res=>{
       //1.自己处理的10行代码
       console.log(res,'第一层的10行处理代码')

       //2.对结果进行第一次处理
       return new Promise((resolve)=>{
           resolve(res+'111')
       })
   }).then(res =>{
       console.log(res,'第二层的10行处理代码');
       return Promise.resolve(res + '222')
   }).then(res =>{
       console.log(res,'第三层的10行处理代码')
   })


    
</script>

在这里插入图片描述
过程

异常状况

Promise的all方法的调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //请求一:
    // let isResult1 = false
    // let isResult2 = false
    $ajax({
        url: '',
        success: function() {
            console.log('结果一')
            isResult1 = true
            handleResult()
        }
    })
    $ajax({
        url: '',
        success: function() {
            console.log('结果二')
            isResult2 = true
            handleResult()
        }
    })

    function handleChange() {
        if (isResult1 && isResult2) {
            //
        }
    }
    Promise.all([
        new Promise((resolve, reject) => {
            $ajax({
                url: 'url1',
                success: function() {
                    resolve(data)
                }
            })
        }),
        new Promise((resolve, reject) => {
            $ajax({
                url: 'url2',
                success: function() {
                    resolve(data)
                }
            })
        })
    ]).then(result =>{
        result[0]
        result[1]
    })
</script>

本来适应发送两次请求才能处理的状况
在这里插入图片描述
使用了Promise之后

结果