promise对象项目应用实例

Promise 对象是一种用于处理异步操作的 JavaScript 对象。下面是几个 Promise 对象的项目应用实例:

  1. 图片加载器 一个图片加载器可以通过 Promise 对象来实现。我们可以创建一个 Promise 对象,该对象在图片加载成功或失败时返回结果。例如:
    查看代码
    function loadImage(url) {
      return new Promise(function(resolve, reject) {
        var img = new Image();
        img.onload = function() {
          resolve(img);
        };
        img.onerror = function() {
          reject(new Error('Could not load image at ' + url));
        };
        img.src = url;
      });
    }
    
    // 用法示例
    loadImage('example.png').then(function(img) {
      console.log('Image loaded', img);
    }).catch(function(err) {
      console.error('Error loading image', err);
    });


  2. 求 使用 Promise 对象可以方便地处理 Ajax 请求。例如:
    查看代码
    function ajax(url) {
      return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              resolve(xhr.responseText);
            } else {
              reject(new Error('Could not load ' + url));
            }
          }
        };
        xhr.open('GET', url);
        xhr.send();
      });
    }
    
    // 用法示例
    ajax('http://example.com/data.json').then(function(response) {
      console.log('Data loaded', response);
    }).catch(function(err) {
      console.error('Error loading data', err);
    });
  3. 超时处理 我们可以使用 Promise.race 方法来实现超时处理。例如:
    查看代码
    function timeout(delay) {
      return new Promise(function(resolve, reject) {
        setTimeout(function() {
          reject(new Error('Timeout'));
        }, delay);
      });
    }
    
    function requestWithTimeout(url, timeoutDelay) {
      return Promise.race([
        ajax(url),
        timeout(timeoutDelay)
      ]);
    }
    
    // 用法示例
    requestWithTimeout('http://example.com/data.json', 1000)
      .then(function(response) {
        console.log('Data loaded', response);
      })
      .catch(function(err) {
        console.error('Error loading data', err);
      });

    上述是 Promise 对象的项目应用实例,它们展示了 Promise 对象的强大功能,并可以帮助我们更好地理解 Promise 对象的概念和用法。

posted @ 2023-03-09 16:17  青幽草  阅读(45)  评论(0编辑  收藏  举报