Promise的基本使用及方法

最新推荐文章于 2024-09-21 16:49:57 发布

s_86597

最新推荐文章于 2024-09-21 16:49:57 发布

阅读量1.2k

点赞数 2

文章标签： javascript js es6

本文链接：https://blog.csdn.net/s_86597/article/details/108273839

版权

Promise

pormise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
传统的异步编程

setTimeout(()=>{
	setTimeout(()=>{
		setTimeout(()=>{
			
		})
	})
})

回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。

promise编程
promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。…
promise有2个特点：

对象的状态不受外界影响。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。

基本用法

在promise中接收2个回调函数：resolve(成功的回调)和reject(失败的回调)。一般用于在异步代码执行成功后执行resolve，否则执行reject

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
例如：用Promise对象实现的 Ajax 操作的例子

```javascript
//封装一个getJSON函数，接收一个url，返回一个promise
const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
  //handler方法，判断请求成功还是失败
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
      //请求成功执行resolve并将数据传入
        resolve(this.response);
      } else {
      //请求失败执行reject并返回失败的信息
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
//接收到成功的数据json
  console.log('Contents: ' + json);
}, function(error) {
//接收到失败的信息
  console.error('出错了', error);
});

Promise的方法

1.Promise.prototype.then()

then方法有2个参数，第一个是成功的回调，第二个是失败的回调，then方法会返回一个新的Promise实例，所以可以进行链式调用，并且then方法接收的是成功还是失败可以通过上一个Promise的状态判断。

let a = new Promise((resolve,reject)=>{
        resolve(2)
    })
    let b = a.then(a=>{
    	//改变后面then方法的状态
        return Promise.reject(a)
    })
    b.then(_=>{},c=>{
    	//在rejcet的回调中接收到上一个then方法的返回值
        console.log(c)	//2
    })

2.Promise.prototype.catch()

cathc方法是在发生错误时执行，接收回调函数，回调函数接收一个错误信息

3.Promise.prototype.finally()

finally()方法是无论Promise的状态是成功还是失败都会执行，接收一个回调函数。

4.Promise.all()

all()方法是将多个Promise包装成一个新的Promise实例，接收一个数组，数组成员即是每个Promise实例，接收参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。
该方法只有在每个Promise返回成功状态后才会返回成功的状态，返回的参数也是一个数组，数组成员即是每个Pormise实例的返回值，否则有一个Promise实例返回失败的状态，那么包装后的Promise也会返回一个失败的状态，返回的参数是第一个返回失败状态的Promise的返回值。