Promise

2023-10-19 12:24:46

参考资料：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

一、概述

ECMAscript 6 原生提供了 Promise 对象。

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。

一个 Promise 必然处于以下几种状态之一：

待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
已兑现（fulfilled）: 意味着操作成功完成。
已拒绝（rejected）: 意味着操作失败。

待定状态的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个原因（错误）被拒绝（rejected）。

当这些情况之一发生时，我们用 promise 的 then 方法排列起来的相关处理程序就会被调用。

如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序就会被调用，

因此在完成异步操作和绑定处理方法之间不会存在竞争状态。

二、构造函数

Promise 构造器主要用于包装不支持promise（返回值不是Promise）的函数。

我们通过new关键字和Promise构造器创建它的对象。这个构造器接受一个名为"executor function"的函数。

这个函数应当接受两个函数参数。

当异步任务成功时，第一个函数（resolve）将被调用，并返回一个值代表成功。

当其失败时，第二个函数（reject）将被调用，并返回失败原因（失败原因通常是一个error对象）。

const myFirstPromise = new Promise((resolve, reject) => {
  // do something asynchronous which eventually calls either:
  //
  //   resolve(someValue)        // fulfilled
  // or
  //   reject("failure reason")  // rejected
});

三、接口请求测试

<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <script> requestUrl("http://123.56.67.147:3312/cesiumdemo/projConvert/getSpatialBySRID/4326").then(res => { alert(res); }).catch(err => { alert(err); }) function requestUrl(url) { let promise = new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); var method = "GET"; xhr.open(method, url, true); xhr.onload = function () { if (xhr.status === 200) { resolve(xhr.response); console.log(xhr.responseText) } else { reject(xhr.responseType); } } xhr.onerror = function () { reject(Error('There was a network error.')); } xhr.send(); }) return promise;
}
</script> </body>
</html>

四、静态方法

五、并发请求测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

　　　　　let urls=["http://123.56.67.147:3312/cesiumdemo/projConvert/getSpatialBySRID/4326", "http://123.56.67.147:3312/cesiumdemo/projConvert/getSpatialBySRID/32650", "http1://123.56.67.147:3312/cesiumdemo/projConvert/getSpatialBySRID/32649错误的url", "http://123.56.67.147:3312/cesiumdemo/projConvert/getSpatialBySRID/32649查询出错", "http://123.56.67.147:3312/cesiumdemo/projConvert/getSpatialBySRID/4490", "http://123.56.67.147:3312/cesiumdemo/projConvert/getSpatialBySRID/3857"];

        let promises=[];
        urls.forEach(v=>promises.push(requestUrl(v)));
        Promise.allSettled(promises).then(results=>{
            console.log(results);
        }).catch(err=>{
            alert(err);
        })
        function requestUrl(url) {
            let promise = new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                var method = "GET";
                xhr.open(method, url, true);
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        resolve(xhr.response);
                        console.log(xhr.responseText)
                    } else {
                        reject(xhr.responseType);
                    }
                }
                xhr.onerror = function () {
                    reject(Error('There was a network error.'));
                }
                xhr.send();
            })
            return promise;

        }
    </script>
</body>
</html>

返回结果：

码农公寓

相关文章