利用Promise自定义一个GET请求的函数示例代码

写在最前面

近期 review 自己以前的代码的时候，看到 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);
 });

下篇文章预告

大概内容：promise 和错误处理详解，javascript 异步和 promise

参考

• mdn-promise
• google-develop

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。