荐 Promise对象的使用

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对象返回过来，得到的数据类似与下面的截图

正确的想要的数据格式应该是这样的（也就是直接将响应回来的数据获得到）

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

状态	解释
pending	初始状态，既不是成功，也不是失败状态。
fulfilled	意味着操作成功完成。
rejected	意味着操作失败。

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对象。

本文地址：https://blog.csdn.net/qq_41813208/article/details/107352082