利用Promise自定义一个GET请求的函数示例代码
写在最前面
近期review自己以前的代码的时候，看到promise的使用方法，用的比较模糊。含义不清，用法凌乱，这里重新温习一下基础知识。
前言
JavaScript是单线程工作，但是浏览器是多线程的。为了更好的完成我们程序的任务。Promise异步的操作就由此诞生了。
一个Promise就是一个代表了异步操作最终完成或者失败的结果对象。
怎么使用？
语法
基本
newPromise(function(resolve,reject){...}/*executor*/);
Promise构造函数包含一个参数和一个带有resolve（解析）和reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用resolve，否则调用reject。
then的使用
promise.then(function(result){
console.log(result);//"Stuffworked!"
},function(err){
console.log(err);//Error:"Itbroke"
});
then()包含两个参数：一个用于成功情形的回调和一个用于失败情形的回调。这两个皆可选，因此您可以只添加一个用于成功情形或失败情形的回调。
主要的promise的三个方法
Promise.all
-这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。
Promise.reject
-返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法。
returnPromise.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及其构造函数来创建的。
constmyFirstPromise=newPromise((resolve,reject)=>{
//?做一些异步操作，最终会调用下面两者之一:
//
//resolve(someValue);//fulfilled
//?或
//reject("failurereason");//rejected
});
想让某个函数拥有Promise功能？让他放回一个Promise对象就可以了：
functionmyAsyncFunction(url){
returnnewPromise((resolve,reject)=>{
constxhr=newXMLHttpRequest();
xhr.open("GET",url);
xhr.onload=()=>resolve(xhr.responseText);
xhr.onerror=()=>reject(xhr.statusText);
xhr.send();
});
};
Demo:1--创建一个GET请求的简单函数
functionget(url){
//返回一个promise对象.
returnnewPromise(function(resolve,reject){
//创建一个XML对象
varreq=newXMLHttpRequest();
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("NetworkError"));
};
//发送请求
req.send();
});
}
现在我们来使用吧
get('story.json').then(function(response){
console.log("Success!",response);
},function(error){
console.error("Failed!",error);
})
Demo:2--创建一个图片上传的Promise函数
functionimgLoad(url){
//创建一个图片上传的Promise()constructor;
returnnewPromise(function(resolve,reject){
varrequest=newXMLHttpRequest();
request.open('GET',url);
request.responseType='blob';
request.onload=function(){
if(request.status===200){
resolve(request.response);
}else{
reject(Error('Imagedidn\'tloadsuccessfully;errorcode:'+request.statusText));
}
};
request.onerror=function(){
reject(Error('Therewasanetworkerror.'));
};
request.send();
});
}
//挂载到body上面去
varbody=document.querySelector('body');
varmyImage=newImage();
//使用
imgLoad('myLittleVader.jpg').then(function(response){
//第一步处理resolve()method.
varimageURL=window.URL.createObjectURL(response);
myImage.src=imageURL;
body.appendChild(myImage);
},function(Error){
//处理错误
console.log(Error);
});
下篇文章预告
大概内容：promise和错误处理详解，JavaScript异步和promise
参考
- MDN-Promise
- Google-Develop
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。