Usage scenarios and functions of Promise's then method

What does the then method of Promise do? Specific code examples are required

In JavaScript, Promise is a mechanism for handling asynchronous operations. It can make the code more concise and readable, while avoiding the problem of callback hell. Promise provides a then method to handle the callback function after the operation is successful. The following will introduce Promise's then method and its functions in detail, and provide specific code examples.

The then method of Promise is used to specify the callback function when the Promise object succeeds. It accepts one or more callback functions as parameters. When the Promise status becomes successful, the then method will be called, passing the successful result as a parameter to the callback function. Among them, the then method returns a new Promise object, and multiple then methods can be called in a chain.

In order to better understand the role of Promise's then method, let's demonstrate its usage through a specific example.

function getData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作，假设请求数据需要1秒钟
    setTimeout(() => {
      const data = '这是异步获取的数据';
      // 模拟请求成功
      resolve(data);
    }, 1000);
  });
}

// 调用 getData 方法获取数据，并使用 then 方法处理成功的回调函数
getData()
  .then((result) => {
    console.log('请求成功');
    console.log('获取到的数据为：', result);
  })
  .catch((error) => {
    console.error('请求失败：', error);
  });

In the above example, we defined a function called getData that returns a Promise object. In the Promise constructor, we simulate an asynchronous operation and use the setTimeout function to simulate a 1-second delay. After the delay is over, we call the resolve method, passing the data to the success callback function.

Next, we call the getData function and use the then method to handle the successful callback. In the callback function, we print a prompt indicating that the request is successful and output the obtained data.

If the state of Promise changes, the then method will be automatically called. This allows us to chain multiple then methods to handle multiple asynchronous operations. Here is an example:

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = '这是异步获取的数据';
      resolve(data);
    }, 1000);
  });
}

getData()
  .then((result) => {
    console.log('第一个异步操作成功');
    console.log('获取到的数据为：', result);
    return '这是返回的数据';
  })
  .then((result) => {
    console.log('第二个异步操作成功');
    console.log('返回的数据为：', result);
  })
  .catch((error) => {
    console.error('请求失败：', error);
  });

In the above example, we returned a new value in the callback function of the first then method. This new value will become the parameter of the subsequent then method. In this way, a Promise chain of calls is formed. In the second then method, we print a prompt that the second asynchronous operation was successful and output the returned data.

If an error occurs in any then method in the Promise chain call, the error will be caught and passed to the nearest catch method. The catch method is used to handle errors in the Promise chain. In the above example, if an error occurs in any of the asynchronous operations, we will print the error message in the catch method.

In summary, the then method of Promise is used to handle the callback function after the asynchronous operation is successful, and can be called in a chain. It is a mechanism to optimize asynchronous code and processing flow, making the code more concise and readable. Through the then method, we can effectively handle asynchronous operations and conveniently handle the results of multiple asynchronous operations.

The above is the function and specific code example of Promise's then method. I hope that by reading this article, you can better understand the then method of Promise and flexibly use this technique in actual development.

The above is the detailed content of Usage scenarios and functions of Promise's then method. For more information, please follow other related articles on the PHP Chinese website!