es6基础0x023：Promise

Snailclimb 发布于2019-08-26 13:24 / 2334人阅读

摘要：同时接受一个变量，称之为栗子当调用之后，执行了，此时的变成了，同时，回调接受一个，作为操作失败的原因说明语法回调栗子注意在异中的错误不会执行注意之后会被忽略不会输出语法回调栗子

0x000 概述

Promise是一个异步编程的解决方案，他经常和ajax一起出现，导致很多人以为Promise是一种新的网络请求技术，其实不然。Promise是一种思考方式、编程方式。

0x000 栗子

先写一个栗子

setTimeout(()=>{
    console.log("here")
},3000)

很简单，3s之后将会打印出here，现在换成Promise：

new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    console.log("here")
})

执行结果也是一样，3s之后将会输出here，还可以这么写

let proxy=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})

setTimeout(()=>{
    proxy.then(()=>{
        console.log("here")
    })
}, 10000)

13s后才输出here

0x002 初始化

语法

new Promise(executor)

参数：

executor：处理器函数，函数的完整签名是(resolve, reject)=>{}

返回值：一个Promise实例

栗子

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})
console.log(promise) // Promise {}

说明：
使用new Promise实例化一个Promise之后，将它输出出来，可以看到他有一个pending，这是说明这个promise的状态，称为PromiseStatus，promise一共有3种状态，一个promise必定处于下面三个状态之一：

pending：初始状态

fulfilled：操作成功

rejected：操作失败

0x003 then

语法：

promise.then(onFulfilled, onRejected)

onFulfilled：操作成功的回调

onRejected：操作失败的回调

栗子1：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})
console.log(promise) // Promise {}
promise.then(()=>{
    console.log(promise) // Promise {: undefined}
})

说明1：
当调用resolve之后，then函数执行了，同时promise的PromiseStatus变成了resolved。onFulfilled同时接受一个变量，称之为PromiseValue：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve(1)
    }, 3000)
})
promise.then((value)=>{
    console.log(value) // 1
})

栗子2:

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        reject()
    }, 3000)
})
console.log(promise) // Promise {}
promise.then(()=>{},()=>{
    console.log(promise) // Promise {: undefined}
})

当调用reject之后，then执行了，此时promise的PromiseStatus变成了rejected，同时，onRejected回调接受一个reason，作为操作失败的原因说明：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        reject("nothing")
    }, 3000)
})
promise.then(()=>{},(reason)=>{
    console.log(reason) // nothing
})

0x004 catch

语法：

promise.catch(onRejected)

onRejected：回调

栗子：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    throw "error"
}).catch((e)=>{
    console.log(`i catch you: ${e}`) // i catch you error 
})

注意1：在异中的错误不会执行catch

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        throw "error"
    }, 3000)
}).catch((e)=>{
    console.log(`i catch you: ${e}`) // Uncaught error 
})

注意2：resolve之后会被忽略

 let promise=new Promise((resolve, reject)=>{
    resolve()
    throw "error"
}).catch((e)=>{
    console.log(`i catch you: ${e}`)  // 不会输出
})

0x005 finally

语法：

p.finally(onFinally)

onFainally：回调

栗子：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    console.log("resolve")
    throw "error"
}).catch((e)=>{
    console.log(`i catch you: ${e}`)
}).finally(()=>{
    console.log("finally")
})
// resolve
// i catch you error
// finally

云服务器服务器托管 es6中的promise promise Promise使用 promise用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108768.html

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
【前端】ES6入门基础知识

摘要：关于的入门了解新增模板字符串为提供了简单的字符串插值功能箭头函数操作符左边为输入的参数，而右边则是进行的操作以及返回的值。将对象纳入规范，提供了原生的对象。增加了和命令，用来声明变量。关于ES6的入门了解新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-o...

philadelphia 2019-08-21 17:21 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0
ES6的基础知识(三)

摘要：会触发方法第一个回调会触发方法第二个回调或方法成功操作失败操作会终止的执行需要方法触发向下执行执行结果实现的参数是一个函数有和两个参数回调函数中会指向需要保存才会指向实例对象三种状态分别为状态只能从变成或者成功回调方法集合失败回调方法集合触 promise // resolve()会触发then方法第一个回调, reject()会触发then方法第二个回调或catch方法 let p ...

lieeps 2019-08-23 16:14 评论0 收藏0
JS笔记

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。网络基础知识之 HTTP 协议详细介绍 HTT...

rottengeek 2019-08-22 13:58 评论0 收藏0