如何用 Promise 自定义一个 GET 请求的函数

写在最前面

• 近期 review 本身之前的代码的时候，看到 promise 的使用方法，用的比较模糊。含义不清，用法凌乱，这里从新温习一下基础知识。
• 下面是👇新鲜出炉的下篇文章，结合 async 来让 promise 更好贴合咱们的场景使用。
• 结合 async 异步函数 - 提升 Promise 的易用性

前言

• JavaScript 是单线程工做，可是浏览器是多线程的。为了更好的完成咱们程序的任务。Promise 异步的操做就由此诞生了。
• 一个 Promise 就是一个表明了异步操做最终完成或者失败的结果对象。

怎么使用？

语法

• 基本

new Promise( function(resolve, reject) {...} /* executor */  );
复制代码

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。 在回调中执行一些操做（例如异步），若是一切都正常，则调用 resolve，不然调用 reject。

• then 的使用

promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error:"It broke"
});
复制代码

then() 包含两个参数：一个用于成功情形的回调和一个用于失败情形的回调。 这两个皆可选，所以您能够只添加一个用于成功情形或失败情形的回调。

主要的 promise 的三个方法

Promise.all

- 这个方法返回一个新的promise对象，该promise对象在iterable参数对象里全部的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则当即触发该promise对象的失败。这个新的promise对象在触发成功状态之后，会把一个包含iterable里全部promise返回值的数组做为成功回调的返回值，顺序跟iterable的顺序保持一致；若是这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息做为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。

Promise.reject

- 返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法。

return Promise.reject(error);

Promise.resolve

- 返回一个状态由给定value决定的Promise对象。若是该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；不然的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，而且将该value传递给对应的then方法。一般而言，若是你不知道一个值是不是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

怎么建立一个 Promise

• Promise 对象是由关键字 new 及其构造函数来建立的。

const myFirstPromise = new Promise((resolve, reject) => {
  // ?作一些异步操做，最终会调用下面二者之一:
  //
  // resolve(someValue); // fulfilled
  // ?或
  // reject("failure reason"); // rejected
});
复制代码

• 想让某个函数拥有 Promise 功能？让他放回一个 Promise 对象就能够了：

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
};
复制代码

Demo: 1 -- 建立一个 GET 请求的简单函数

function get(url) {
  // 返回一个 promise 对象.
  return new Promise(function(resolve, reject) {
    // 建立一个 XML 对象
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      
      if (req.status == 200) {
        // 请求 200的时候处理 response 
        resolve(req.response);
      }
      else {
        // 处理请求错误信息
        reject(Error(req.statusText));
      }
    };

    // 处理网络错误信息
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // 发送请求
    req.send();
  });
}
复制代码

• 如今咱们来使用吧

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.error("Failed!", error);
})
复制代码

Demo: 2 -- 建立一个图片上传的 Promise 函数

function imgLoad(url) {
    //建立一个图片上传的 Promise() constructor;
    return new Promise(function(resolve, reject) {
      
      var request = new XMLHttpRequest();
      request.open('GET', url);
      request.responseType = 'blob';
     
      request.onload = function() {
        if (request.status === 200) {
        
          resolve(request.response);
        } else {
        
          reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
        }
      };
      request.onerror = function() {
     
          reject(Error('There was a network error.'));
      };
      
      request.send();
    });
  }

  // 挂载到 body 上面去
  var body = document.querySelector('body');
  var myImage = new Image();
  
  // 使用
  imgLoad('myLittleVader.jpg').then(function(response) {
   
    //第一步 处理 resolve() method.
    var imageURL = window.URL.createObjectURL(response);
    myImage.src = imageURL;
    body.appendChild(myImage);
    
  }, function(Error) {
  
    // 处理错误
    console.log(Error);
  });
复制代码

下篇文章

• 新鲜出炉的下篇文章写好，结合 async 来让 promise 更好贴合咱们的场景使用。
• 结合 async 异步函数 - 提升 Promise 的易用性

参考

• MDN-Promise
• Google-Develop