promise理解应用

最新推荐文章于 2024-03-30 15:48:38 发布

happyRenzg

最新推荐文章于 2024-03-30 15:48:38 发布

阅读量412

点赞数

分类专栏： es6

本文链接：https://blog.csdn.net/mr_renhappy/article/details/112510744

版权

es6 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

对promise的理解

一种处理异步编程的解决方案，本质是对象或者构造函数，内部存放在未来某个事件执行结束的结果(通常是异步操作)。

避免异步回调层层嵌套

js是单线程执行任务，一次执行一个任务，为解决此问题，js将任务执行模式分开为两种，异步和同步。

处理异步执行的任务通过回调方式进行处理

举个例子一级分类的集合数组里面对应的每项item下还有二级分类集合数据

异步请求一级分类获取每项再通过每项ID 请求二级分类集合这样形成了异步请求层层嵌套

 fetch(initOrgUrlC, {}).then(res => {
          res.data.forEach((item)=>{
            fetch(initOrgUrlById, {id:item.id}).then(res => {
                    this.arr = res.data
                }).catch(err => {
                console.log(err)
            })
          })
        }).catch(err => {
            console.log(err)
        })

在这样的异步请求里面js不一定保证执行顺序，所谓回调地狱。promise是这种异步编程的解决方案。

promise有两个特点

1.对象的状态不会受外界影响，promise对象代表一个异步操作，promise有三种状态，

pending(进行中) fulfilled(成功) rejected(失败)

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

2.状态一旦改变，不会再变，任何时候都可以得到这个结果。promise对象状态的改变只有两种可能

从 pending -> fulfilled 或者从 pending ->rejected 只要这两种情况发生状态就会凝固会一直保持这个结果

这时候已经定型（resolved）

这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

promise的缺点

1.无法取消promise，一旦新建会立即执行，无法中途取消

2.如果不设置回调函数，promise内部抛出的错误不会反应到外部

3.当处于pending状态时候，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

如果某些事件不断地反复发生，一般来说，使用 Stream 模式是比部署Promise更好的选择。

promise基本用法

promise对象是一个构造函数，new Promise()来生成 promise实例

    const promise = new Promise(function(reslove,reject){
        if(/*异步操作成功*/){
            resolve(value)
        }else{
            reject(error)
        }
    })

promise构造函数接收一个函数作为参数，该函数里有两个参数，resolve，reject，他们分别也是两个函数

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

then 函数

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
then 函数接收两个函数作为可选参数：

第一个回调函数是Promise对象的状态变为resolved时调用，

第二个回调函数是Promise对象的状态变为rejected时调用。

这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。

   promise.then(function(value){
        //success
    },function(err){
        //failure
    })

promise.then(onFulfilled, onRejected)

同时遵循下面几个规则：

如果可选参数不为函数时应该被忽略；
两个函数都应该是异步执行的，即放入事件队列等待下一轮 tick，而非立即执行；
当调用 onFulfilled 函数时，会将当前 Promise 的值作为参数传入；
当调用 onRejected 函数时，会将当前 Promise 的失败原因作为参数传入；
then 函数的返回值为 Promise。

then函数是异步执行！！！ Promise 新建后就会立即执行。

使用promise案例

异步加载图片例子

function loadImageAsync(url){
        return new Promise(function(reslove,reject){
            const image = new Image();
            image.onload = function (){
                console.log('image suss')
                reslove(image)
            };
            image.onerror = function (){
                reject(new Error('could not load image at'+url))
            };
            image.src = url
        })
    }
    const imgUrl = 'http://app.jbttech.com.cn/AppLogo/android/ic_launcher2_1.png'
    const imgDom =  loadImageAsync(imgUrl).then((res)=>{
        console.log(res)
    })

运行返回

promise ajax 封装

function  ajax(url){
        return  new Promise(function (reslove,reject){
            var req = new XMLHttpRequest()
            req.open('GET',url,true)
            req.onload = function (){
                    if(req.status===200){
                        reslove(req.responseText)
                    }else{
                        reject(new Error(req.statusText))
                    }
            };
            req.onerror = function (){
                reject(new Error(req.statusText))
            };
            req.send();
        })
    }
    var url = 'https://admin.jbttech.com.cn/initPage/initOrg'
    ajax(url).then(function (value){
        document.write('成功返回'+value)
    }).catch(function (error){
        document.write('错误'+error)
    })

封装一个导出文件函数

function exportExcelPost(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url,params).then((res) => {
                console.log('数据返回', res.data.msg)
                resolve(res.data)
                if (res.data.success == 'error' || res.data.success == 'fail') {
                    return
                }
                window.location.href = res.data.msg
            }).catch((err) => {
                console.log('解析错误', err)
                reject(error)
            })
        })
    }

Promise.prototype.then方法：链式操作

Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

 getJson('"/post/1.json"').then((res)=>{
        return res.json
    }).then(json=>{
        //对json 进行处理
    })

第一次回调函数then的值是一个新的promise，如果这个值也是一个异步操作，可以继续调用自身的then函数来处理

采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function (comments) {
  console.log("resolved: ", comments);
}, function (err){
  console.log("rejected: ", err);
});

//使用箭头函数

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);

`catch()函数`

catch方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

axios.post('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 axios.post 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

上面代码中，axios.post()方法返回一个 Promise 对象，

如果该对象状态变为resolved，则会调用then()方法指定的回调函数；

如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。

另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

finally 函数

finally函数不管最后promise对象状态如何都会执行的操作

 promise.then(res=>{
        //...
    }).catch(err=>{
        console.log(err)
    }).finally(()=>{
        //...
    })

服务器使用 Promise 处理请求，然后使用finally方法关掉服务器

server.listen(port)
  .then(function () {
    // ...
  })
  .finally(server.stop);

all 函数

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

function queryData(){
        return new Promise((resolve,reject)=>{
            var xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                if (xhr.readyState != 4) return;
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 处理正常结果
                    resolve(xhr.responseText);
                } else {
                    // 处理异常结果
                    reject('服务器错误');
                }
            };
            xhr.open('get', url);
            xhr.send(null);
        });
    }
    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
    var proArr = [p1,p2,p3]
    Promise.all(proArr).then((res)=>{
        console.log(res)
    })

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

race 函数

const p = Promise.race([p1, p2, p3]);

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

Promise.race()方法的参数与Promise.all()方法一样

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

上面代码中，如果 5 秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。

happyRenzg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
promise理解应用

promise理解应用什么是promise一种处理异步编程的解决方案，本质是对象或者构造函数，内部存放在未来某个事件执行结束的结果。避免异步回调层层嵌套js是单线程执行任务，一次执行一个任务，为解决此问题，js将任务执行模式分开为两种，异步和同步。处理异步执行的任务通过回调方式进行处理举个例子一级分类的集合数组里面对应的每项item下还有二级分类集合数据异步请求一级分类获取每项再通过每项ID 请求二级分类集合这样形成了异步请求层层嵌套 fetch(initOr..
复制链接

扫一扫

专栏目录