1、Promise描述与作用

Promise是异步编程的一种解决方案，比传统的解决方案(回调函数和事件)更合理和强大。
Promise简单说就是一个容器对象，里面保存着某个未来才会结束的事件(通常是指一个异步操作)结果，由它可以获取异步操作的结果。
es6原生提供了Promise对象，并提供统一的API，各种各样的异步操作都可以用同样的方法进行处理。
所以有了Promise对象我们就可以将异步操作以同步的流程表达出来了，避免了以前在ajax里层层嵌套的在回调函数中一级一级地往下调用要同步操作的接口了。

2、基本语法

1.Promise实例定义：

  1.     <script>
  2.         // Promise对象接收一个function作为参数，function中有两个固定的参数resolve,reject
  3.         // resolve,reject是两个固定的函数，注意不能改名称
  4.         const promise = new Promise(function(resolve,reject){
  5.             //do somethings
  7.             if(/*异步成功*/){
  8.                 resolve(data);
  9.             }else{
  10.                 reject(error);
  11.             }
  12.         });
  13.     </script>

3、.then .catch方法

在Promise实例生成后，可以在.then方法里分别接收resolve状态和reject状态的回调处理函数

  1.     <script>
  2.         promise.then(function(data){
  3.             //success
  4.         },function(error){
  5.             //failure
  6.         }).catch(function(error){
  7.             //catch
  8.         });
  9.     </script>

4、图片异步加载处理例子

  1. <body>
  2.     <div id="contianer"></div>
  3.     <script>
  4.         var contianer = document.getElementById("contianer");
  5.         let loadImage = (url) => {
  6.             let promise = new Promise((resole, reject) => {
  7.                 let image = new Image();
  8.                 image.src = url;
  9.                 image.onload = () => {
  10.                     resole(image);
  11.                 };
  12.                 image.onerror = () => {
  13.                     reject(new Error(`加载图片失败,url${url}`));
  14.                 }
  15.             });
  16.             return promise;
  17.         }
  19.         let promise = loadImage("http://pic1.win4000.com/wallpaper/2020-10-10/5f811d580e1e9.jpg");
  20.         promise.then((data) => {
  21.             contianer.appendChild(data);
  22.         }, (error) => {
  23.             console.log(`error,${error}`);
  24.         }).catch((error)=>{
  25.             console.log(`catch,${error}`);
  26.         });
  27.     </script>
  28. </body>

5、异步请求API接口例子

  1.     <script>
  2.         const getJson = function (url) {
  3.             // 异步操作
  4.             const promise = new Promise(function (resolve, reject) {
  5.                 const handler = function () {
  6.                     if (this.readyState !== 4) {
  7.                         //0 1 2 3 4
  8.                         return;
  9.                     }
  10.                     if (this.status === 200) {
  11.                         resolve(this.response);
  12.                     }
  13.                     else {
  14.                         reject(new Error(this.statusText));
  15.                     }
  16.                 }
  18.                 const client = new XMLHttpRequest();
  19.                 client.open("get", url);
  20.                 client.onreadystatechange = handler;
  21.                 client.responseText = "json";
  22.                 client.setRequestHeader("Accept", "application/json");
  23.                 client.send();
  24.             });
  26.             return promise;
  27.         }
  29.         var promise = getJson("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php");
  30.         console.log(promise);
  31.         promise.then((data) => {
  32.             console.log(data);
  33.         }, (error) => {
  34.             console.log(`error,${error}`);
  35.         }).catch(
  36.             (catchError) => {
  37.                 console.log(`catchError,${catchError}`);
  38.             }
  39.         );
  40.     </script>

image.png