什么是promise，promise的使用及实现

什么是promise
是es6新增的一个构造函数里面放的是一个异步操作
promise是异步编程的一种方案，解决了地狱回调的问题，是一种链式调动的方式

Promise 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。

Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

promise 有三个状态

pending 初始状态

fulfilled 成功状态

rejected 失败状态
以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态

Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected

promise的创建
使用 new 来创建一个promise对象。
Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」

resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

then()方法： then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

catch()方法：当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中。

all()方法： Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

race()方法： race 按字面解释，就是赛跑的意思。race 的用法与 all 一样，只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

promise简单举例

//Promise异步封装ajax
<script>function Feach(method,  ) {let p = new Promise((resolve, reject) => {// 手写原生ajaxlet xhr = new XMLHttpRequest(); //创建ajax请求xhr.open(method, url, true);  //发起请求xhr.send(null); //发送请求，发送的参数是空的//异步回调函数xhr.onreadystatechange = function () {//readystate：请求返回五种状态// 0(未初始化):还没有调用send()方法// 1(载入):已调用send()方法，正在发送请求// 2(载入完成):send()方法执行完成，已经接收全部响应内容// 3(交互):正在解析响应内容// 4(完成):响应内容解析完成，可以在客户端调用了if (xhr.readyState == 4 && xhr.status == 200) {  resolve(xhr.responseTex t);  //responseText:获取字符式的响应数据 responseXML:获取XML形式的响应数据} else if (xhr.status == 400) {reject('失败')}}})return p;}let url = "http://wthrcdn.etouch.cn/weather_mini?city=%E5%8C%97%E4%BA%AC";Feach('get',url).then(res => {console.log(res)}, err => {console.log(err)})</script>

<script>//promise异步加载图片// 创建一个函数function requestImg(){// 创建一个promise对象var p= new Promise(function(resolve,reject){// 创建一个图像对象var img=new Image();// 图像在页面加载完成后执行成功的回调img.onload=function(){resolve(img);}img.src="./qzone.png"});return p;}//延时函数，用于给请求计时function timeout(){// 创建一个promise对象，如果请求超时则执行错误的回调var p=new Promise(function(resolve,reject){setTimeout(()=>{let span=documnet.createElement('span')span.innerText='加载失败'resolve(span);},5000);});return p;}// promise执行一次后如果执行成功就执行then方法，否则执行catch方法Promise.race([requestImg(),timeout()]).then(function(results){console.log(results);}).catch(function(reason){console.log(reason)});//上面代码requestImg函数异步请求一张图片，timeout函数是一个延时5秒的异步操作，我们将他们在一起放在race中赛跑//如果5秒内图片请求成功那么便进入then方法，执行正常的流程。// 如果5秒内图片还未成功返回，那么则进入catch，报“图片请求超时”的信息</script>

什么是promise，promise的使用及实现相关推荐

【Promise】自定义 - 手写Promise - Promise.all - Promise(executor)
手写Promise 1. 整体结构框架 2. Promise(executor) 3. Promise.prototype.then 4. Promise.prototype.catch 5. Pro ...
Promise ,Promise.all 和Promise.race的区别
Promise ,Promise.all 和Promise.race的区别 Promise promise是用来解决异步编程问题的,比传统的回调函数和事件处理方法要更加的合理. promise有三个状 ...
JavaScript异步函数Promise①——Promise筑基
期约是对尚不存在的一个替身.期约(promise)这个名字最早是由 Daniel Friedman和 David Wise在他们于 1976 年发表的论文"The Impact of App ...
vue 手写签名_手写Promise/Promise.all/Promise.race（手写系列一）
背景几个月没写文章了,愧对关注本专栏的小伙伴.最近有同学提议我出一个手写系列的文章对常见对前端工具.框架.设计模式做一个覆盖.同时有个要求:代码要尽量短小易懂,并且体现原理,让学习者学习过后能在未来 ...
C++多线程：异步操作std::async和std::promise
文章目录 std::async 简介使用案例 std::promise 简介成员函数总结之前的文章中提到了C++多线程中的异步操作机制 C++ 多线程:future 异步访问类(线程之间安全便 ...
ES6中的Promise详解
Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...
关于ES6中Promise的应用-顺序合并Promise，并将返回结果以数组的形式输出
1.Promise 基础知识梳理创建一个Promise实例 const promise = new Promise(function(resolve, reject) {if (success){r ...
大白话讲解Promise（二）理解Promise规范
上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...
入门Promise的正确姿势
Promise是异步编程的一种解决方案,从语法上说,Promise是一个对象,从它可以获取异步操作的消息. Promise的基本用法 Promise构造函数接受一个函数作为参数,该函数的两个参数分别是 ...
对Promise的一些深入了解
1.介绍promise和模仿Promise.all和Promise.race promise的设计主要是解决回调地狱(接收结果用回调函数来处理,但必须传入回调函数)的问题,由一层层嵌套回调函数改为由t ...

什么是promise，promise的使用及实现

什么是promise，promise的使用及实现

什么是promise，promise的使用及实现相关推荐

最新文章

热门文章