欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Promise异步编程

程序员文章站 2022-07-02 21:24:44
...

由于JavaScript是一门单线程语言,在同一时间只允许一个代码块执行,所以就会造成前面的代码在执行,而后面的代码需要等待,这个时候异步编程显得很重要了,可以在前面的代码还没加载完前直接执行。

了解Promise的生命周期:

  • 进行中(pending):操作还未开始
  • 已处理(settled):异步操作执行结束
  • 结束后进入以下两种状态中的一种:
    1:成功(Fulfilled):操作成功
    2:失败(Rejected):由于程序出错或别的原因,未能成功

所有的Promise都有then方法,该方法有两个可选参数,前者为成功时调用的函数,后者是失败调用的函数

   let promise = new Promise((resolve, reject) => {
      resolve('success');
      reject('error');
    });
    //两个参数
	promise.then(function (data) {       
      	console.log(data);                      	//返回成功的数据
    }, function (err) {
      console.log(err);							//返回失败的数据
    })
    
	//只有成功参数
	promise.then(function (data) {       
      	console.log(data);                     	 //返回成功的数据
    })

	//只有失败参数,使用null替代前一个参数
	promise.then(null,function (error) {       
      	console.log(error);                    	  //返回失败的数据
    })

Promise还有catch()方法接受失败的数据,更加清晰的表示,then来处理成功的,catch来处理失败的

 	promise.catch(function (error) {       
      	console.log(error);                     	 //返回失败的数据
    })
    
    相当于没有成功参数表示:
    
  	promise.then(null,function (error) {       
      	console.log(error);                    	  	//返回失败的数据
    })

创建未完成的Promise可以根据Promise构造函数来创建新的Promise,只有一个函数作为参数,而该函数有两个参数,分别为resolve()函数和reject()函数,成功执行resolve函数,失败执行reject()函数

   let promise = new Promise((resolve, reject) => {
      resolve('success');
      reject('error');
    });

创建已处理的Promise

	let success= Promise.resolve('success');
	success.then(function (data) {       
      	console.log(data);                    	  	  //返回成功的数据
    })
	let fail= Promise.reject('error');
	fail.catch(function (err) {       
      	console.log(err);                    	  	  //返回失败的数据
    })

Promise的resolve()和reject()方法都可以接受非Promise的Thenable对象作为参数

	 let thenable = {
	   then: function(resolve, reject) {
	     resolve('success');
	   }
	 }
	 let promise = Promise.resolve(thenable);
	 promise.then(function(data) {
	   console.log(data);
	 })

执行器错误:当执行器内部中抛出错误时,失败处理程序会被调用

	let promise = new Promise((resolve, reject) => {
	  throw new Error('error');
	});
	promise.then((error) => {
	  console.log(error.message);
	})

串行Promise:当前者被解决了,后者才会处理程序

	promise.then((success) => {
	  console.log(success);
	}).then(() => {
	  console.log('hello');
	})


	promise.then((success) => {
	  console.log(success);
	}).catch((err) => {
	  console.log(err);
	})

封装一个promise异步的ajax请求

 var getJSON = function(url) {
    var promise = new Promise((resolve, reject) => {
      var xmlHttp = new XMLHttpRequest();
      xmlHttp.open('GET',url);
      xmlHttp.onreadystatechange = handler;
      xmlHttp.responseType = 'json';
      xmlHttp.setRequestHeader("Accept","application/json");
      xmlHttp.send();
      function handler() {
        if(this.readyState === this.DONE) {
          if(this.status === 200) {
            resolve(this.response);
          } else {
            reject(this);
          }
        }
      }
    });
    return promise;
  };
  getJSON('/get.json').then(function(data) {
    console.log(data);
  }, function(err){
    console.log(err);
  })
相关标签: ES6