Promise

什么是Promise

Promise是一种用于异步编程的JavaScript对象，它可以解决回调地狱的问题并提供更好的代码可读性和可维护性。Promise可以看做是一种承诺，表示在未来某个时间点会返回一个结果，这个结果可以是成功的，也可以是失败的。

Promise对象有三种状态：

• Pending（等待状态）：Promise对象刚被创建时的初始状态，此时还没有返回结果。
• Fulfilled（成功状态）：当Promise对象返回结果时，进入成功状态，并把结果作为参数传递给后续的then方法。
• Rejected（失败状态）：当Promise对象返回错误结果时，进入失败状态，并把错误信息作为参数传递给后续的catch方法。

Promise对象可以通过then方法和catch方法进行链式调用。then方法用来处理成功状态的结果，catch方法用来处理失败状态的结果。在链式调用中，每一个then方法都会返回一个新的Promise对象，从而实现了链式调用的效果。

Promise的用法

使用Promise可以方便地组合多个异步操作，使得代码更加简洁和可读性更强。例如，我们可以使用Promise.all方法来并行执行多个异步操作，并在所有操作完成后进行下一步处理。

Promise构造函数的参数是一个函数，该函数接受两个参数：resolve和reject。resolve函数将Promise对象的状态从“未完成”改变为“成功”，并将异步操作的结果作为参数传递给then方法；而reject函数则将Promise对象的状态从“未完成”改变为“失败”，并将失败原因作为参数传递给catch方法或then方法的第二个参数。

在异步操作完成后，可以调用resolve方法将异步操作的结果传递给then方法。

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, Promise!');
  }, 1000);
}).then(result => {
  console.log(result); // 输出: 'Hello, Promise!'
});

如果异步操作失败，则可以调用reject方法将失败原因传递给catch方法或then方法的第二个参数。

new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('Something went wrong!'));
  }, 1000);
}).catch(error => {
  console.log(error.message); // 输出: 'Something went wrong!'
}); 

总之，Promise构造函数的参数可以让我们在异步操作完成后，根据结果来改变Promise对象的状态，并将结果传递给then方法或失败原因传递给catch方法。 

Promise的作用是什么 

Promise是一种用于异步编程的JavaScript对象，它可以解决回调地狱的问题并提供更好的代码可读性和可维护性。

1. 处理异步操作：在JavaScript中，异步操作比如Ajax请求、定时器等是很常见的，它们不能立即得到结果，而是需要等待一段时间才能得到结果。使用Promise可以方便地处理异步操作，避免阻塞UI线程，提高页面响应速度。
2. 避免回调地狱：在传统的回调函数中，如果有多个异步操作需要执行，嵌套的回调会导致代码难以阅读和维护。而Promise通过链式调用的方式，可以避免这种嵌套的情况，使得代码更加清晰易懂。
3. 提供更好的错误处理：Promise提供了catch方法来处理异常情况，使得代码更加健壮和可维护。在Promise中，任何一个操作的错误都可以在catch方法中捕获并进行处理，从而避免了在回调函数中抛出异常导致程序崩溃的情况。
4. 便于组合操作：使用Promise可以方便地组合多个异步操作，使得代码更加简洁和可读性更强。例如，我们可以使用Promise.all方法来并行执行多个异步操作，并在所有操作完成后进行下一步处理。

Promise的优化示例

优化前：

$.ajax({
    type:"post",

        url:"...",
    success: function(){//成功回调
        //再次异步请求
        $.ajax({
            type:"post",
            url:"...",
            success:function(){
                .......//如此循环
            }
        })
    }
})

优化后：

// 封装ajax请求
function getData(url, data = {}){
	return new Promise((resolve, reject) => {
  	$.ajax({
      // 发送请求类型
    	type: "GET",
      url: url,
      data: data,
      success: function (res) {
      	// 修改Promise状态为成功, 修改Promise的结果res
        resolve(res)
      },
      error:function (res) {
      	// 修改Promise的状态为失败,修改Promise的结果res
        reject(res)
      }
    })
  }
}

// 调用函数
getData("data1.json")
  .then((data) => {
  	// console.log(data)
    const { id } = data
    return getData("data2.json", {id})
  })
  .then((data) => {
  	// console.log(data)
    const { usename } = data
    return getData("data3.json", {usename})
  })
  .then((data) => {
  	console.log(data)
  })