promise封装异步操作

最新推荐文章于 2024-01-10 14:53:47 发布

复活吧我的艾斯

最新推荐文章于 2024-01-10 14:53:47 发布

阅读量355

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_71369720/article/details/132711656

版权

1.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>
    <div class="container">
        <h2></h2>
        <button class="btn" id="btn">点击抽奖</button>

    </div>
    <script>
        function rand(m,n){
            return Math.ceil(Math.random()*(n-m+1)+m-1)
        }
        //获取元素对象
        const btn=document.querySelector('#btn')
        btn.addEventListener('click',function(){
            //实例化一个promise对象。他会对异步操作进行一个封装
            //它有一个函数作为参数，函数有两个参数
            //promise 异步
            //resolve解决
            //reject拒绝
            //redolve和reject都是函数类型的参数
            const p = new Promise((resolve,reject)=>{
               setTimeout(()=>{
                let n = rand(1,100)
                if(n<30){
                    resolve(n)//n<30的时候成功，调用reslove函数,它可以把promise对象的状态设置为成功
                    //通过下面的then方法调用
                    //把n传进去
                }else{
                    reject(n)//失败的时候调用reject函数，它可以把promise对象的状态设置为失败
                }
               },1000)
            })
            //then方法有两个函数参数，一个resolve，一个reject，根据结果状态调用不同的函数
            //value和reason是函数形参，可以自己写
            p.then((value)=>{
                alert('中将了，号码是：'+value)
            },(reason)=>{
                alert('再接再厉,你的号码是：'+reason)
            })
        })
    </script>
</body>
</html>

2.promise封装ajax操作

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>
    <div>
        <button id="btn">点击发送ajax请求</button>
    </div>
    <script>
        //获取元素对象
        const btn = document.querySelector('#btn')
        btn.addEventListener('click',function(){
            const p = new Promise((resolve,reject)=>{
                //ajax请求步骤
                //1.创建对象
                const xhr = new XMLHttpRequest()
                //2.初始化
                xhr.open('GET', 'https://api.apiopen.top/getJok')
                //get是请求方式 后面的地址是给谁发送请求
                //3.发送
                xhr.send()
                //4.处理响应结果
                xhr.onreadystatechange = function () {
                    // 0：请求未初始化（还没有调用 open()）。
                    // 1：请求已经建立，但是还没有发送（还没有调用 send()）。
                    // 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
                    // 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
                    // 4：响应已完成；您可以获取并使用服务器的响应了。
                    if (xhr.readyState == 4) {
                        //判断响应状态码 2开头的表示成功
                        if (xhr.status >= 200 && xhr.status <= 300) {
                            //如果响应成功 ,通过resolve打印响应体
                            resolve(xhr.response)
                        } else {
                            //如果失败 通过reject输出失败的响应状态
                            reject(xhr.status)
                        }
                    }
                } 
            }) 
            //调用then方法 ,对成功和失败的返回结果做个处理
            // p.then((成功)=>{},(失败)=>{})
            p.then((value) => {
                console.log(value)
             }, (reason) => { 
                console.log(reason)
             })
        })
        
    </script>
</body>
</html>

3.promise的catch

script>
        let p = new Promise((resolve,reject)=>{
            //这里面的代码是同步调用的
            reject('error')
            //调用reject函数，将promise状态设置为失败
        })
        //catch函数只有失败的函数
        p.catch(reason=>{
            console.log(reason)
        })
    </script>

4.promise中的async函数


        //async异步
        //async和await一起使用
        //async也是一个函数,作为一个函数标识,返回值为promise对象，promise对象的结果由async函数的结果决定
        async function a(){
            
                //1.返回值是非promise类型的，返回那个值345
                //return 345

                //2.返回的是一个promise对象
               return p = new Promise((resolve,reject)=>{ 
                // resolve('ok')成功
                reject('error')//失败
                //这里是resolve函数就是成功
                //是reject就是失败,她两决定r的状态
            })
            //3.抛出异常
            throw 'error'
            //失败
        }  
        let r = a()//r的状态由返回值决定决定

5.await（和async一起使用），具体用法看6

//await表达式
        //1.右侧是promise时,await返回的是promise成功的值
        //2.右侧promise是失败的,await返回的是错误，用try{}catch(e){}
        //3.如果是其它值，返回这个值

6.await和async读文件

//读取resource 下的 1.html 2.html 3.html文件
    //之前是一直回调
    <script>
        const fs = require('fs')
        //1.util包里的promisify函数可以把文件转化为promise对象
        const util = require('util')
        const mineReader = util.promisify(fs.readFile)
        async function a (){
            try{
            let data1 = await mineReader('./resource/1.html')
            let data2 = await mineReader('./resource/2.html')
            let data3 = await mineReader('./resource/3.html')
        } catch(e){
        console.log(e.code)
    }   
    }
    </script>

7.await和async封装Ajax请求

<!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>
    <button id="btn">点击按钮获取段子</button>
    <script>
        function sendAJAX(url){
            return new Promise((resolve,reject)=>{
                //1.创建对象
                const xhr = new XMLHttpRequest()
                //2.初始化
                xhr.open('GET', 'https://api/text/qwq')
                //3.发送
                xhr.send()
                //4.处理响应结果
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        //判断响应状态码 2开头的表示成功
                        if (xhr.status >= 200 && xhr.status <= 300) {
                            //如果响应成功 ,通过resolve打印响应体
                            resolve(xhr.response)
                        } else {
                            //如果失败 通过reject输出失败的响应状态
                            reject(xhr.status)
                        }
                    }
                }
            }) 
        }
        //段子接口 https://api/text/qwq
        let btn = document.querySelector('#btn')
        btn.addEventListener('click',async function(){
            let a = await sendAJAX('https://api/text/qwq')
        })


    </script>
</body>
</html>