Promise简单介绍

最新推荐文章于 2024-09-10 21:56:49 发布

是小爱呀

最新推荐文章于 2024-09-10 21:56:49 发布

阅读量1k

点赞数 1

分类专栏： Web端学习文章标签：学习前端 javascript

本文链接： https://blog.csdn.net/weixin_51465537/article/details/131923109

版权

Web端学习专栏收录该内容

16 篇文章 4 订阅

订阅专栏

Promise是ES6引入的异步编程解决方案，它可以封装异步操作并管理其成功或失败的状态。Promise解决了回调地狱问题，支持链式调用和灵活的错误处理。通过.then()和.catch()方法，可以清晰地处理异步操作的结果和错误。同时，async/await的出现进一步简化了异步代码，使其更接近同步编程的风格。

摘要由CSDN通过智能技术生成

一、什么是Promise？

简单的说，Promie是ES6引入的，进行异步编程的一种新的解决方案（在ES5及之前，处理异步操作通常使用回调函数）。promise对象用来封装一个异步操作并可以获取其成功或失败的结果值。

二、为什么要使用Promise?

支持链式调用，可以解决JavaScript中回调地狱（Callback Hell）问题；
指定回调函数的方式更加灵活，使异步代码更易于编写和管理。

三、什么是回调地狱（Callback Hell）？

是指在异步编程中，多个回调函数嵌套在一起形成的深层次、难以维护的代码结构。这种情况通常出现在使用回调函数处理异步操作的代码中，特别是在ES5及之前的JavaScript版本中。

asyncFunction1(opt, (...data1) => {
  asyncFunction2(opt, (...data2) => {
      asyncFunction3(opt, (...data3) => {
          asyncFunction4(opt, (...data4) => {
                  //... more nested callbacks ...
            });
        });
    });
});

在上述代码中，每个异步操作的结果都依赖于前一个操作的结果，导致嵌套的回调函数越来越多，代码变得难以维护和理解。
由此可以看出回调地狱的问题：

可读性差：由于多个层级的回调函数，代码变得晦涩难懂，可读性大大降低。
错误处理困难：在回调地狱中，错误处理需要在每个回调函数中进行，导致错误处理代码重复和冗余。
增加维护成本：当代码逻辑需要修改时，需要深入多层回调来理解和修改，增加了维护成本。

四、Promise对象三种状态:

Pending（进行中）：初始状态，表示异步操作正在进行中。
Fulfilled（已成功）：异步操作成功完成，并返回了结果，此时Promise会进入已成功状态。
Rejected（已失败）：异步操作失败，出现错误，并返回错误信息，此时Promise会进入已失败状态。

一个Promise对象一旦进入Fulfilled（已成功）或Rejected（已失败）状态，就称为“settled”状态，这个状态不可改变。

五、创建Promise的一般语法：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作代码
  // 如果操作成功，调用 resolve(value)
  // 如果操作失败，调用 reject(error)
});

六、Promise对象的主要方法:

Promise对象的主要方法是`.then()`和`.catch()`，通过这两个方法可以处理异步操作的结果和错误：

.then(onFulfilled) ：当Promise进入Fulfilled状态时，会调用`onFulfilled`函数来处理异步操作的成功结果。
.catch(onRejected)：当Promise进入Rejected状态时，会调用`onRejected`函数来处理异步操作的失败情况。

function fetchUserData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      const success = true; // 模拟成功情况，可以根据实际情况设置
      if (success) {
        const data = { name: "John", age: 30 };
        resolve(data); // 成功时调用resolve，并传递结果
      } else {
        reject("Error: Unable to fetch user data"); // 失败时调用reject，并传递错误信息
      }
    }, 2000); // 模拟异步延迟2秒
  });
}

// 使用Promise
fetchUserData()
  .then((data) => {
    console.log("User data:", data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

效果展示：
成功：

失败：

七、回调函数和Promise对比示例：

示例1，使用回调函数处理异步操作：

// 假设有一个异步函数，用于模拟从服务器获取数据
function fetchDataFromServer(callback) {
  setTimeout(() => {
    const data = { message: "Data received from server" };
    // 模拟成功获取数据
    callback(null, data); // 第一个参数为错误对象，null表示没有错误
    // 模拟出现错误的情况
    // callback("Error: Unable to fetch data");
  }, 2000); // 模拟异步延迟2秒
}

// 使用回调函数获取数据
fetchDataFromServer((error, data) => {
  if (error) {
    console.error("Error:", error);
  } else {
    console.log("Data:", data);
  }
});

效果展示：
成功：

失败：

在上述示例1中，fetchDataFromServer函数接受一个回调函数作为参数，并在异步操作完成后调用该回调函数。回调函数的第一个参数通常用于传递错误信息，第二个参数用于传递成功的结果。

示例2，使用Promise处理异步操作：

// 假设有一个异步函数，用于模拟从服务器获取数据
function fetchDataFromServer() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // 模拟成功情况，可以根据实际情况设置
      if (success) {
        const data = { message: "成功接收到数据" };
        resolve(data); // 成功时调用resolve，并传递结果
      } else {
        reject("接收数据失败！"); // 失败时调用reject，并传递错误信息
      }
    }, 2000); // 模拟异步延迟2秒
  });
}

// 使用Promise获取数据
fetchDataFromServer()
  .then((data) => {
    console.log("Data:", data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

效果展示：
成功：

失败：

在上述示例2中，fetchDataFromServer函数返回一个Promise对象。通过.then()方法处理成功的情况，通过.catch()方法处理失败的情况。

示例1和示例2对比分析：

使用回调函数时，代码会出现多层嵌套，可能导致回调地狱，特别是当处理多个异步操作时。
使用Promise时，通过链式调用.then()和.catch()，代码结构更加清晰和易于阅读。

八、举例其他异步函数操作：

举简单的例子，在fs文件操作、数据库操作、AJAX操作以及定时器中，如何使用回调函数和Promise函数，进行对照学习。

8.1、文件操作（fs）：

使用回调函数：

//使用Node.js的fs模块进行文件读取
const fs = require('fs');

// 使用回调函数读取文件
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Error:', err);
  } else {
    console.log('Data from file:', data);
  }
});

效果展示：
成功：

失败：

使用Promise：

const fs = require('fs/promises');

// 使用Promise读取文件
fs.readFile('example.txt', 'utf8')
  .then((data) => {
    console.log('Data from file:', data);
  })
  .catch((err) => {
    console.error('Error:', err);
  });

效果展示：
成功：

失败：

8.2、数据库操作：

首先，确保已经安装了mysql2库（或其他MySQL连接库），然后通过该库来连接数据库。

npm install mysql2

使用回调函数：

//此处使用Mysql数据库进行数据查询
const mysql = require('mysql2');

// 创建数据库连接池
const pool = mysql.createPool({
  host: 'your_database_host',
  user: 'your_database_user',
  password: 'your_database_password',
  database: 'your_database_name',
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

// 示例：执行查询操作
const query = 'SELECT * FROM account WHERE money > ?';
const values = [1000];

pool.getConnection((err, connection) => {
  if (err) {
    console.error('Error:', err);
    return;
  }

  connection.query(query, values, (error, results) => {
    connection.release();

    if (error) {
      console.error('Error:', error);
    } else {
      console.log('Query results:', results);
    }
  });
});

效果展示：
成功：

失败：

使用Promise：

const mysql = require('mysql2');

// 创建数据库连接池
const pool = mysql.createPool({
  host: 'your_database_host',
  user: 'your_database_user',
  password: 'your_database_password',
  database: 'your_database_name',
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

// 封装查询操作为Promise函数
function executeQuery(query, values) {
  return new Promise((resolve, reject) => {
    pool.getConnection((err, connection) => {
      if (err) {
        reject(err);
        return;
      }

      connection.query(query, values, (error, results) => {
        connection.release();

        if (error) {
          reject(error);
        } else {
          resolve(results);
        }
      });
    });
  });
}

// 示例：执行查询操作
const query = 'SELECT * FROM account WHERE monrey > ?';
const values = [1000];

executeQuery(query, values)
  .then((results) => {
    console.log('Query results:', results);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

效果展示：
成功：

失败：

8.3、AJAX操作：

使用回调函数：

function sendAJAX(url, successCallback, errorCallback) {
  const xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.open('GET', url);
  xhr.send();

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        successCallback(xhr.response);
      } else {
        errorCallback(xhr.status);
      }
    }
  };
}

// Example usage with callbacks
sendAJAX(
  'https://api.apiopen.top/getJoke',
  function (data) {
    console.log('Data:', '请求成功');
  },
  function (error) {
    console.error('Error:', '请求失败');
  }
);

效果展示：
成功：

失败：

使用Promise：

function sendAJAX(url){
	return new Promise((resolve,reject)=>{
		const xhr = new XMLHttpRequest();
		xhr.responseType = 'json';
		xhr.open("GET",url);
		xhr.send();
		//处理结果
		xhr.onreadystatechange = function(){
			if(xhr.readyState === 4 ){
				//判断成功
				if(xhr.status >= 200 && xhr.status <300){
					resolve(xhr.response);
				}else{
					reject(xhr.status);
				}
			}
		}
	})
}
// Example usage with Promise
sendAJAX('https://api.apiopen.top/getJoke')
	.then((data) => {
		console.log('Data:',"请求成功");
	})
	.catch((error) => {
		console.error('Error:', "请求失败");
	});

效果展示：
成功：

失败：

8.4、定时器：

使用回调函数：

//此处使用定时器函数setTimeout和setInterval进行操作
// 使用回调函数实现定时器
function doSomething(callback) {
  setTimeout(() => {
    console.log('Doing something...');
    callback();
  }, 2000); // 2秒后执行回调
}

// 使用回调函数执行定时器操作
doSomething(() => {
  console.log('Callback executed after 2 seconds.');
});

使用Promise：

// 使用Promise实现定时器
function doSomething() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Doing something...');
      resolve();
    }, 2000); // 2秒后resolve
  });
}

// 使用Promise执行定时器操作
doSomething()
  .then(() => {
    console.log('Promise resolved after 2 seconds.');
  });

效果展示：

九：Promise函数基本流程和相关API：

综上学习，可以看到Promise函数的基本流程如图所示：

除了上述看到的Promise.resolved()、Promise.rejected()、Promise.then()、Promise.catch(），其他常用的API还有：Promise.all(iterable)、Promise.race(iterable)等等。

Promise.all(iterable)：接收一个可迭代对象iterable（如数组或类数组对象），返回一个新的Promise对象。该Promise对象在iterable中的所有Promise对象都解决（Fulfilled）时才会解决，并将所有解决结果以数组形式返回；如果iterable中有任何一个Promise对象拒绝（Rejected），则该Promise对象立即拒绝，并返回第一个拒绝的原因。

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // Output: [1, 2, 3]
  })
  .catch((error) => {
    console.error(error);
  });

效果展示：

Promise.race(iterable)：类似于Promise.all()，但是只要iterable中的任何一个Promise对象解决或拒绝，返回的Promise对象就会立即解决或拒绝，并采用第一个解决或拒绝的结果。

const promise1 = new Promise((resolve) => setTimeout(resolve, 1000, "one"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 2000, "two"));

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // Output: "one" (promise1 resolves faster)
  })
  .catch((error) => {
    console.error(error);
  });

效果展示：

十：async函数和await表达式

10.1 async函数

函数的返回值为promise对象，且promise对象的结果是由async函数的返回值决定。它其实是用来定义一个返回 Promise 对象的异步函数。

async function main(){

}
let result = main();
console.info(result);

此时看控制台可以看到，返回值是一个promise对象，且状态是"fulfilled"（已成功）。

1.如果返回的值是一个非Promise类型的数据：

  <body>
    <script>
        async function main(){
            // 1.如果返回的值是一个非Promise类型的数据，则return什么，值就是什么。
            return 1234;
        }
        let result = main();
        console.info(result);
    </script>
  </body>

效果展示：

2.返回的是一个Promise对象：

 <body>
    <script>
        async function main(){
            // 1.如果返回的值是一个非Promise类型的数据，则return什么，值就是什么。
            // return 1234;
            // 2.如果返回的是一个Promise对象
            return new Promise((resolve,reject)=>{
                // resolve('成功！')
                reject("失败！请注意观察一下状态值。")
            })
        }
        let result = main();
        console.info(result);
    </script>
  </body>

成功：

失败：

3.直接抛出一个异常：

  <body>
    <script>
        async function main(){
            // 1.如果返回的值是一个非Promise类型的数据，则return什么，值就是什么。
            // return 1234;
            // 2.如果返回的是一个Promise对象
            // return new Promise((resolve,reject)=>{
            //     // resolve('成功！')
            //     reject("失败！请注意观察一下状态值。")
            // })
            // 3.直接抛出一个异常
            throw "哎呀  直接是异常啦！请注意观察一下状态值。"
        }
        let result = main();
        console.info(result);
    </script>
  </body>

效果展示：

10.2 await 表达式

await右侧的表达式一般为promise对象，返回的是promise成功的值。若是表达式时其他值，则直接将此值作为await的返回值。
注意：await必须写在async函数中，但是async函数中可以没有await。若是await中的promise失败了，就会抛出异常，需要通过try...catch捕获处理。

1、直接使用await：

  <body>
    <script>
        // 直接使用await
        await 100;
    </script>
  </body>

效果展示：
2.右侧为promise对象:

  <body>
    <script>
        // 1.直接使用await
        // await 100;
        // 2.右侧为promise对象
        async function main(){
            let p = new Promise((resolve,reject)=>{
                resolve("成功！");
            })
            let res = await p;
            console.info(res);
        }
        main();
    </script>
  </body>

效果展示：

3.右侧为其他：

  <body>
    <script>
        // 1.直接使用await
        // await 100;
        // 2.右侧为promise对象
        async function main(){
            let p = new Promise((resolve,reject)=>{
                resolve("成功！");
            })
            // let res = await p;
            // 2.右侧为其他类型的数据，不常用
            let res = await "其他类型数据";
            console.info(res);
        }
        main();
    </script>
  </body>

效果展示：

4. promise是失败的状态：

  <body>
    <script>
        // 1.直接使用await
        // await 100;
        // 2.右侧为promise对象
        async function main(){
            let p = new Promise((resolve,reject)=>{
                // resolve("成功！");
                reject("promise失败的情况")
            })
            // let res = await p;
            // 2.右侧为其他类型的数据，不常用
            // let res = await "其他类型数据";
            // 3.promise是失败的状态：需要使用try...catch
            try {
                let res = await p;
            } catch (error) {
                console.info(error);
            }
        }
        main();
    </script>
  </body>

效果展示：

10.3 async和await结合使用

使用回调函数实现实例：

//使用Node.js的fs模块进行文件读取
const fs = require('fs');

// 使用回调函数读取文件
fs.readFile('./example.txt', 'utf8', (err, data1) => {
  if(err) throw err;
  fs.readFile('./example2.txt', 'utf8', (err, data2) => {
    if(err) throw err;
    fs.readFile('./example3.txt', 'utf8', (err, data3) => {
      if(err) throw err;
      console.log(data1 + data2 + data3)
    });
  });
});

使用async函数+await实现示例：

const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);
async function main(){
  try {
    let data1 = await mineReadFile('./example.txt');
    let data2 = await mineReadFile('./example2.txt');
    let data3 = await mineReadFile('./exampl23.txt');
    console.log(data1 + data2 + data3)
  } catch (error) {
    console.log(error)
  }
}
main();

效果展示：
成功：

失败：

十一：总结

Promise对象是用于处理异步操作的特殊对象，通过其构造函数创建，并传递一个executor函数，内部包含异步操作，当异步操作完成时，通过resolve方法将Promise对象从Pending状态转换为Fulfilled状态，将结果传递给处理函数；若异步操作失败，则通过reject方法将Promise对象转换为Rejected状态，传递错误信息。我们可以使用.then()和.catch()来处理成功和失败的情况，使得异步编程更加清晰、简洁，避免回调地狱，提供了更强大的异步编程能力。