js高级进阶：promise同步编程技巧

旧城等待， 2023-10-13 15:15 116阅读 0赞

promise是ES6引进的异步编程解决方案，是一个构造函数，可以实例化对象，可以解决回调地狱的问题。  
首先我们看一下promise的实例化对象是什么：

let P = new Promise(function(){});//new一个promise传入一个函数
     console.log(P);

打印结果：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ1NjYyMQ_size_16_color_FFFFFF_t_70]可以看到promise是一个对象 有自己的原型，有then，catch等方法

promise的参数  
promise的参数是一个函数 这个函数有两个参数 分别是reject（失败的回调）和resolve（成功的回调）。  
resolve的用法：

let P = new Promise(function(resolve ,reject ){
          /*函数体执行完之后调用resolve*/
          resolve('成功')
        });
        P.then((res)=>{
          console.log(res);
        })

打印结果：  
![在这里插入图片描述][20210608165439205.png]  
在函数体执行完之后调用resolve(),结果会走then()方法

reject的用法

let P = new Promise(function(resolve ,reject ){
          /*还是执行完之后调用reject*/
          reject('错误')
        });
        P.catch(function(err){
          console.log(err);
        })

打印结果：  
![在这里插入图片描述][20210608165624394.png]  
在函数体执行完之后调用reject(),结果会走catch()方法

### promise的then方法使用： ###

浏览器编译遇见then()方法调用promise实例，并在函数调用resolve()之后编译then()中的函数体

### promise的catch方法使用： ###

用法和then()一样  
在浏览器编译遇到reject()时调用。

### promise的all方法使用： ###

all()方法传入一个数组，这个数组的元素是多个promise实例，在所有实例执行完之后执行then()方法。

## 工作中遇到的问题：多个请求同步执行 ##

比如我有一个上传文件的需求，但是，每次只能上传一个文件，而且只能同步执行上传请求，不能一下全都发送过去，所以就需要使用同步执行多个上传请求：需要配合for循环和promise一起使用，for循环多个文件，await 一个promise请求，当promise执行完之后，再循环下一次：

但是这个请求之前，需要先拿到上传的多个文件列表：做一个防抖延时拿到所有的上传文件

// 上传文件回调事件
    const handleUploadChange = (uploadFile: any, uploadFiles: any) => {
      console.log('handleUploadChange----', uploadFiles, fileList)
      fileList = uploadFiles
      upTimer && clearTimeout(upTimer)
      upTimer = setTimeout(() => {
        upTimer = null
        console.log('防抖 高频触发后n秒内只会执行一次  再次触发重新计时')
        startUpFiles() //说明此时change了所有文件了 可以上传了
      }, 1000)
      console.log('gitFileList-----', gitFileList)
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ1NjYyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210608163755857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ1NjYyMQ==,size_16,color_FFFFFF,t_70
[20210608165439205.png]: https://img-blog.csdnimg.cn/20210608165439205.png
[20210608165624394.png]: https://img-blog.csdnimg.cn/20210608165624394.png