Promise对象的使用

红太狼 2023-02-26 09:24 36阅读 0赞

Promise对象也称链式调用，如果有一组数据需要先查询到另一组数据，然后通过这组数据再获取最终想要的数据。  
例如封装`axios`

创建一个`ajaxUtil.js`文件

import axios from 'axios'
    /* html页面,则在引入ajaxUtil.js前通过<script>引入axios <script src="https://unpkg.com/axios/dist/axios.min.js"></script> */
    function ajax (url, data={ }, type='GET') { 
        return new Promise(function (resolve, reject) { 
            // 执行异步ajax请求
            let promise;
            if (type === 'GET') { 
                // 准备url query参数数据
                let dataStr = '';
                //数据拼接字符串
                Object.keys(data).forEach(key => { 
                    dataStr += key + '=' + data[key] + '&'
                });
                if (dataStr !== '') { 
                    dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'));
                    url = url + '?' + dataStr
                }
                // 发送get请求
                promise = axios.get(url)
            } else { 
                // 发送post请求
                promise = axios.post(url, data)
            }
            promise.then(function (response) { 
                // 成功了调用resolve()
                resolve(response.data)
            }).catch(function (error) { 
                //失败了调用reject()
                reject(error)
            })
        })
    }

在需要使用ajax发送请求的地方引入`ajaxUtil.js`  
html页面通过`script`引入,例如`<script src="js/ajaxUtils.js"></script>`  
然后就可以通过

async myMthod1(){ 
    	let result=await ajax('请求的url','要传的参数对象','默认GET请求');
    }

通过`await ajax(url,{},'GET/POST')`方式获取promise对象中的数据，使用`await`的方法需要在方法上加上`async`声明。  
如果不使用await则会将promise对象返回过来，得到的数据类似与下面的截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]  
正确的想要的数据格式应该是这样的（也就是直接将响应回来的数据获得到）  
![在这里插入图片描述][20200715090848409.png]

引用：[MDN文档关于Promise对象的说明][MDN_Promise]  
Promise对象有三种状态

<table> 
 <thead> 
  <tr> 
   <th>状态</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pending</td> 
   <td>初始状态，既不是成功，也不是失败状态。</td> 
  </tr> 
  <tr> 
   <td>fulfilled</td> 
   <td>意味着操作成功完成。</td> 
  </tr> 
  <tr> 
   <td>rejected</td> 
   <td>意味着操作失败。</td> 
  </tr> 
 </tbody> 
</table>

##### Promise.resolve(value) #####

返回一个成功时的Promise（通过`value`将数据传递）

##### Promise.reject(reason) #####

返回失败的Promise对象（通过`reason`将失败返回的数据传递）

#### Promise.all(iterable) ####

获得promise对象的链式调用返回的所有的成功和失败的数据，需要讲链式调用的promise对象替代这里的`iterable`。  
链式调用的过程中，成功则将成功的数据通过`Promise.resolve(value)`方法传给下一个`Promise`对象  
如果其中有一个请求失败了，则将失败返回的数据通过`Promise.reject(reason)`传递给下一个Promise对象。  
这样的链式调用中Promise对象中就会存下成功和失败时返回的数据，顺序按照链式调用的顺序。

##### Promise.allSettled(iterable) #####

等到所有promises都完成（每个promise返回成功或失败）。  
返回一个promise，该promise在所有promise完成后完成。并带有一个对象数组，每个对象对应每个promise的结果。

##### Promise.any(iterable) #####

接收一个Promise对象的集合，当其中的一个promise完成，就返回那个已经有完成的promise的值。

##### Promise.race(iterable) #####

当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]: /images/20230209/b1019f2e78064850b5575379140c7009.png
[20200715090848409.png]: /images/20230209/77fda833e818423eb196e1871206b012.png
[MDN_Promise]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise