ES6中promise详解及用法实例

什么是Promise

Promise是一种异步编程解决方案，用于处理异步操作。它是ES6的新特性，旨在解决回调地狱的问题。Promise对象代表一个尚未完成，但预计在未来完成的异步操作。

Promise有三个状态：pending（等待中）、fulfilled（已完成）和rejected（已失败）。当Promise处于pending状态时，可以转变为fulfilled状态或rejected状态，转变后不可以再改变状态。

Promise的语法

Promise的语法和用法如下：

let promise = new Promise(function(resolve, reject) {
  // 异步处理
  // 处理完成后，调用resolve 或 reject
});

promise.then(function(result) {
  // 处理成功时的回调函数
}).catch(function(error) {
  // 处理失败时的回调函数
});

在上面的代码中，我们通过new操作符创建了一个Promise对象，并传入一个函数作为参数，这个函数内部可以进行异步操作。当异步操作完成后，可以调用resolve或reject函数来改变Promise的状态。在使用Promise的过程中，我们可以通过then和catch方法分别设置Promise状态变化后的回调函数，当Promise的状态从pending变为fulfilled时，将调用then方法中传入的回调函数；当Promise的状态从pending变为rejected时，将调用catch方法中传入的回调函数。

Promise 的场景

Promise适用于一些需要先处理异步操作的场景，例如：内容的异步加载、URL的异步获取、动画的异步呈现等等。

在这些场景中，我们需要在异步操作完成后执行某些操作。在ES5中，通常采用回调函数的方式实现，代码可读性不高，且容易出现回调地狱等问题。而Promise能够很好地解决这些问题。

Promise 的优点

使用Promise，我们可以很好地解决回调地狱问题，提高代码可读性并且方便错误处理。Promise还具有以下优点：

可以通过链式调用来解决多层嵌套的回调问题。
支持多个并发异步任务，一并返回结果。
可以使用Promise.all或Promise.race等方法管理异步操作。

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('https://example.com/image.jpg').then(function(img) {
  console.log('Image width:', img.width);
  console.log('Image height:', img.height);
}).catch(function(error) {
  console.error(error.message);
});

在上面的代码中，我们通过Promise异步加载了一张图片，并在图片加载完成后打印其宽高。如果图片加载失败，将打印一个错误信息。

示例二：异步获取JSON数据

function getJSON(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(JSON.parse(xhr.response));
    };
    xhr.onerror = function() {
      reject(new Error('Could not load ' + url));
    };
    xhr.open('GET', url);
    xhr.send();
  });
}

getJSON('https://example.com/data.json').then(function(data) {
  // 处理返回的JSON数据
}).catch(function(error) {
  console.error(error.message);
});

在上面的代码中，我们使用Promise异步加载JSON数据，并在成功后处理返回的数据，如果加载失败，则抛出一个错误信息。