Promise对象的使用

2020-09-07 16:38发布

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)
        })
    })}12345678910111213141516171819202122232425262728293031323334353637

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

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

通过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

来源:CSDN
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。