promise对象项目应用实例
Promise 对象是一种用于处理异步操作的 JavaScript 对象。下面是几个 Promise 对象的项目应用实例:
- 图片加载器 一个图片加载器可以通过 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); });
- 求 使用 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); });
- 超时处理 我们可以使用 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 对象的概念和用法。