Js Promise

最新推荐文章于 2022-08-19 23:31:23 发布
最新推荐文章于 2022-08-19 23:31:23 发布
阅读量237 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/souic/article/details/124158933
版权

Js Promise

形式

const p = new Promise((resolve, reject) => {
  if(true)
    resolve(); //将promise对象的状态设置为成功
  else 
    reject(); //将promise对象的状态设置失败
});

resolve 异步执行成功调用

reject 异步执行失败调用

以上两个参数都是函数类型的数据

p.then(() => {
	//成功执行
}, () => {
	//失败执行
});

试一手

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Ajax</h1>
        <button class="btn btn-primary">点击发送请求</button>
    </div>

    <script>
        const btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.apiopen.top/getJoke');
            xhr.send();
            //readystate
            //0 为初始状态
            //1 表示open执行完毕
            //2 表示send执行完毕
            //3 表示服务端返回部分结果
            //4 表示服务端返回所有结果
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    //判断响应判断码 200 404...
                    //2xx都表示成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 响应行
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体


                    } else {
                        console.log('Error');
                    }
                }
            }
        })
    </script>

</body>

</html>

以上为一般ajax的基础操作，然后我们来试试使用Promise封装一下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Ajax</h1>
        <button class="btn btn-primary">点击发送请求</button>
    </div>

    <script>
        const btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            const p = new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', 'https://api.apiopen.top/getJoke');
                xhr.send();

                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {

                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response);
                        } else {
                            reject(xhr.status)
                        }
                    }
                }
            });
            p.then(val => {
                console.log(val);
            }, err => {
                console.warn(err);
            })
        });


    </script>

</body>

</html>

当然啊，这样看着很乱，所以我们可以封装一手，下面就只写js代码了

function sendAjax(url) {
    return new Promise((resolve, reject) => {
        const x = new XMLHttpRequest();
        x.responseType = 'json'; // 设置响应体为JSON格式
        x.open('GET', url);
        x.send();
        x.onreadystatechange = function () {
            if (x.readyState === 4) {
                if (x.status >= 200 && x.status < 300) {
                    resolve(x.response);
                } else {
                    reject(x.status);
                }
            }
        }
    });
}

// 直接调用
sendAjax('https://api.apiopen.top/getJoke').then(val => {
    console.log(val);
}, err => {
    console.log(err);
})

Promise的状态

实例对象的一个属性「promiseState」

这个属性有三个状态

  • Pending 未决定的（默认状态）
  • Resolved / Fulfilled 成功
  • Rejected 失败

状态的变换有且只有两种Pending->Resolved和Pending->Rejected而且只能变换一次

实例对象的一个属性「promiseResult」

保存着异步请求成功或者失败的结果

只有resolve和reject能修改，当然强行throw也可以

手撕Promise

function Promise(excutor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;

    this.callbacks = [];

    const self = this;

    function resolve(data) {
        if (self.PromiseState !== 'pending') return;
        self.PromiseState = 'fullfilled';
        self.PromiseResult = data;

        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved(data);
            })
        })
    }

    function rejected(data) {
        if (self.PromiseState !== 'pending') return;
        self.PromiseState = 'rejected';
        self.PromiseResult = data;

        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onRejected(data);
            })
        })
    }

    try {
        excutor(resolve, rejected);
    } catch (error) {
        rejected(error)
    }

}

Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;

    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason;
        }
    }

    if (typeof onResolved !== 'function') {
        onResolved = value => value;
    }

    return new Promise((resolve, rejected) => {

        function callback(type) {
            try {
                let result = type(self.PromiseResult);
                if (result instanceof Promise) {
                    result.then(v => {
                        resolve(v);
                    }, e => {
                        rejected(e);
                    })
                } else {
                    resolve(result);
                }
            } catch (e) {
                rejected(e);
            }
        }

        if (this.PromiseState === 'fullfilled') {
            setTimeout(() => { callback(onResolved); })

        }

        if (this.PromiseState === 'rejected') {
            setTimeout(() => { callback(onRejected); })
        }

        if (this.PromiseState === 'pending') {

            this.callbacks.push({
                onResolved: function () {
                    callback(onResolved);
                },
                onRejected: function () {
                    callback(onRejected);
                }
            });
        }
    })
}

Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);

}

Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(v => {
                resolve(v);
            }, e => {
                reject(e);
            })
        } else {
            resolve(value);
        }
    })
}

Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    })
}

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let count = 0;
        let arr = [];
        for (let i = 0; i < promises.length; ++i) {
            promises[i].then(v => {
                count++;
                arr[i] = v;
                if (count === promises.length) {
                    resolve(arr);
                }
            }, e => {
                reject();
            })
        }
    })
}

Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; ++i) {
            promises[i].then(v => {
                resolve(v);
            }, e => {
                reject(e);
            })
        }
    })
}
ThisIsSonic
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2020面经-JS部分(二）类型，this,promise,apply,深拷贝
XiangChiZhaJi的博客
09-06 549
列举三种强制类型转换和两种隐式类型转换 JavaScript是一门弱类型语言，在JavaScript中声明变量不需指定类型， 对变量赋值也没有类型检查，同时JavaScript允许隐式类型转换。 强制类型转换 通过String()，toString()，Number()，parseInt()，parseFloat()，Boolean()等函数强制转换 Boolean(0) // => false - Boolean Boolean(new object()) // => true - Bool
Promise中this指向问题
weixin_44262946的博客
09-03 5836
Promise中this指向问题 1、this指向window还是实例？ 下面分析两段JavaScript代码段，共用下面这段Html代码： <div id="app"> <input type="button" value="获取笑话" @click="getJoke"> <p> {{ joke }}</p> </div> this指向window： // 引入axios <script src="https://unpk
【JavaScript进阶】 一步一步带你手写 Promise，理解核心的异步链式调用及JS执行机制原理
qq_49900295的博客
08-19 945
现在网上有非常多的手写 Promise 教学文章，但无不例外都是给你一堆代码，或者某些核心代码，让你看完之后感觉，嗯，很厉害，但还是不知所云，不知其所以然。那么本文真正从一个小白开始带你深入浅出，一步一步实现自己的 Promise，这种自己造轮子的过程一定是进步最快的过程，快上车开始吧！
promise语法与用法、this指向和this指向修改
m0_59023231的博客
04-11 2742
promise语法与写法、this指向与修改
JS中this指向简析
PromiseKeeping的博客
04-08 563
this关键字是JavaScript中最复杂的机制之一。它被自动定义在所有函数的作用域中，即使是非常有经验的JavaScript开发者也很难说清楚它到底指向什么。 其实只需要记住一点：this的指向在函数定义的时候是无法确定的，只有在函数执行的时候才能确定this到底指向谁，谁调用它就指向谁！ 人们很容易把this理解成指向函数本身，这个推断其实从英语的语法角度来讲是没问题的。我们先来分析...
Javascript Promise用法详解
10-18
JavaScript Promise 是一种处理异步操作的技术，它在ES6中被引入，旨在解决回调地狱问题，提供了一种更强大、规范化的异步编程解决方案。Promise 是一个代表了可能还未完成或已经完成的异步操作的对象，它有三种状态...
JavaScript Promise 原理
05-15
Promise 原理，包括then、catch、all、race、reject、finally、resolve方法。200行代码实现自己的Promise
JavaScript promise对象
最新发布
08-31
JavaScript promise对象
JavaScript Promise 用法
10-22
“Promises”渐渐成为JavaScript里最重要的一部分，大量的新API都开始promise原理实现。这篇文章主要为大家详细介绍了JavaScript Promise 用法，感兴趣的小伙伴们可以参考一下
JavaScript Promise
11-20
JavaScript Promise 是一种在ES6中引入的异步编程解决方案，旨在解决回调地狱（Callback Hell）问题，让异步代码更加可读、可维护。Promise 代表一个未来可能完成或失败的异步操作的结果，它可以处于三种状态：...
js promise 模式的 异步回调函数
斗地主7891的专栏
09-03 750
//constructor var Promise = function() { this.callbacks = []; } Promise.prototype = { constructor: Promise, resolve: function(result) { ...
Promise 的使用，调用当前组件的this的时候的使用方法
runrun117的博客
05-26 577
const params = { operType:'3',//发布人改派 reason:sendDesc, sendStaff:this.state.selectChangeMan, workId:workId, attachFiles:attachFiles, }; // console.log('最终提交的信息====',params); let component = this;//在promise中，this的含义已经改变，所以需要通过别名的方法将this.
js中Promise详解（转）
canglingyue的专栏
01-16 1万+
原文 MDN链接 概述所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。（这里的翻译源自ECMAScript 2015关于Promise的解释，没有原文翻译MDN的原话，如果您有疑问，可以参看英文的说明文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Globa
在js中深入分析promise的内部实现原理及常见问题
浮生离梦的博客
06-04 6604
一、Promise的内部实现原理 Promise 1）Promise 是异步编程的一种解决方案，比传统的异步解决方案回调函数和事件更合理、更强大，现已被 ES6 纳入进规范中，Javascript 异步操作的基本单位也逐渐从 callback 转换到 promise 2）Promise 表示为一个异步操作的最终结果，ECMAscript 规范定义为延时或异步计算最终结果的占位符 3）Promi...
Js Promise的用法（简单明了）
Web前端工程师
05-05 1794
//promisel数据同步操作 submitHandler(e){ try{ let the=this; let promise1 = new Promise(function(resolve, reject) { //定义一个promise方法 const result= the.$http.get('/api/login',{params:the.model}); //请求数据接口 console.log(result); reso.
js promise的用法
热门推荐
一棵不断成长的小白菜
06-28 6万+
 在理解promise的使用之前，首先要理解js语言的运行环境是单线程的，也就是说一次只能完成一个任务，也就是一条流水线，如果有多个任务就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这与java的多线程环境截然不同，所以要加以区分。1、对于js同步和异步，在这里需要加以备注一下：我们可以简单的理解为：可以改变程序执行顺序的操作就可以看成为异步操作。其实异步和同步的差别很简单，就在于这...
对js Promise理解
米老头
02-10 1万+
1.优点和缺点 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。 Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将
js promise的用法_前端猛男带你理解promise
weixin_39864453的博客
11-27 329
相信很多人都对 es6 语法中的 promise 比较熟悉，但是大部分人只知道它的用法，却没有真正去了解它的内在实现。下面就让笔者带领大家去一探究竟，并且手写一个类似 promise 的类实现。文章内容主要分为三个部分：1、高阶函数；2、js 异步编程；3、手写 promise 源码。这时候就会有人疑惑，前面两部分是干嘛用的？在笔者看来，前面两个章节可以说是对 promise 原理的铺垫...
JavaScript Promise入门与实战指南
《JavaScript Promise迷你书》是一本由azu原著并由liubin、kaku和honnkyou翻译的中文版技术书籍，专注于JavaScript Promise的深入理解和实用应用。Promise是JavaScript语言中的一个重要概念，用于处理异步操作，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值