Promise 对象
Promise 表示一个异步操作的最终结果, 与之进行交互的方式主要是 then 方法, 该方法注册了两个回调函数, 用于接收 promise 的终值或本 promise 不能执行的原因.
Promise 的状态
一个 Promise 的当前状态必须为以下三种状态中的一种: 等待态 (Pending), 执行态(Fulfilled) 和拒绝态(Rejected).
异步操作未完成(pending)
异步操作成功(fulfilled)
异步操作失败(rejected)
基本用法
Promise 是一个构造函数, Promise 接收一个参数, 这个参数是函数, 同时这个参数函数要传入两个参数: resolve,reject, 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数.
Promise 对象上有 then,catch 等方法
- var getAjax = function (url) {
- const promise=new Promise(function(resolve,reject){
- var xhr=new XMLHttpRequest()
- xhr.onreadystatechange=function(){
- if(xhr.readyState!==4){
- return
- }
- if(xhr.status===200){
- resolve('成功时调用 resolve 函数, 并返回一个 Promise 对象')
- }else{
- reject(new Error(xhr.statusText))
- }
- }
- xhr.open('GET',url)
- xhr.send()
- })
- return promise// 返回 promise 对象
- }
- getAjax('./ajax.html')
- .then((data)=>{
- console.log('第一个参数:'+ data)// 打印 resolve 函数传递的参数
- return ('第一个 then 的第一个参数')// 返回一个 Promise 对象并将数据传递给下一个 then
- },(data)=>{
- console.log('第二个参数:'+ data)// 打印 reject 函数传递的参数
- return('第一个 then 的第二个参数')// 返回一个 Promise 对象并将数据传递给下一个 then
- }
- )
- .then((data)=>{
- // 如果刚开始在 getAjax 函数中是调用 reject 函数, 第一个 then 方法才会执行第二个参数, 但是后面的 then 方法只执行第一个参数
- console.log('第一个参数:'+ data)// 打印上一个 then 方法传递的参数
- return ('第二个 then 的第一个参数')
- },(data)=>{
- console.log('第二个参数:'+ data)
- return ('第二个 then 的第二个参数')
- }
- )
- .then((data)=>{
- console.log('第一个参数:'+ data)
- },(data)=>{
- console.log('第二个参数:'+ data)
- }
- )
异步操作成功时调用 resolve:
异步操作失败时调用 reject:
总结:
Promise 是一个构造函数, 通过 new 命令创建 promise 对象. 在创建对象的时候传递一个参数, 这个参数是一个函数, 这个函数有两个参数, 这两个参数分别是 resolve 和 reject, 它们是两个函数, 由 JavaScript 引擎提供, 不用自己实现. 成功时调用 resolve 方法, 失败时调用 reject 方法.
在 promise 对象上有 then 方法, 这个方法可以传递两个参数, 这两个参数是函数.
如果调用 resolve 函数, 就会调用 then 方法的第一个参数. 如果调用的是 reject 函数, 就会调用 then 方法的第二个参数. 不管第一个 then 调用第一个参数还是第二个参数, 第一个 then 方法后面的 then 方法都会执行第一个参数.
resolve 方法和 reject 方法需要带参数, 这个参数会传递给 then 方法对应的参数 . 在 then 方法中返回数据时, 可以传递给下一个 then 方法.
来源: https://www.cnblogs.com/qfstudy/p/9492708.html