Promise 的 resolve 和 reject 使用场景实例-JavaScript中文网-JavaScript教程资源分享门户

Promise 的 resolve 和 reject 使用场景实例

在前端开发中，由于 JavaScript 是单线程执行的，所以为了避免阻塞主线程执行，我们经常会使用异步操作，而 Promise 就是一种非常常见的异步编程方式。Promise 最常用的 API 就是其中的 resolve 和 reject 方法。在本文中，我们将详细介绍 Promise 的 resolve 和 reject 方法的使用场景和实例，并讲述其深度和学习以及指导意义。

Promise 的构造函数接收一个回调函数作为参数，该回调函数含有两个函数参数 resolve 和 reject。resolve 用于将 Promise 对象的状态改为「resolved」，而 reject 用于将 Promise 对象的状态改为「rejected」。

resolve 和 reject 在实际开发中有各自的使用场景和实例。下面我们将通过几个示例来了解它们的具体用法。

场景一：异步操作成功时使用 resolve

当异步操作成功时，可以使用 resolve 方法来改变 Promise 对象的状态。例如，我们有一个网络请求的示例。

// www.javascriptcn.com code example
function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // 请求成功，将 Promise 对象的状态改为「resolved」
          resolve(xhr.responseText)
        } else {
          // 请求失败，将 Promise 对象的状态改为「rejected」
          reject(xhr.statusText)
        }
      }
    }
    xhr.send()
  })
}

如上代码所示，在网络请求的回调中，如果请求成功，则使用 resolve 方法将 Promise 对象的状态改为「resolved」；如果请求失败，则使用 reject 方法将 Promise 对象的状态改为「rejected」。这样，在调用 fetchData 函数时，就可以通过 then 方法来获取请求到的数据。

fetchData('https://jsonplaceholder.typicode.com/posts')
  .then(data => console.log(data))
  .catch(error => console.log(error))

场景二：异步操作失败时使用 reject

当异步操作失败时，可以使用 reject 方法来改变 Promise 对象的状态。例如，在执行一个异步操作时，发现用户没有登录，这个时候就可以使用 reject 方法来表示操作失败。示例代码如下：

// www.javascriptcn.com code example
function getUserInfo() {
  return new Promise((resolve, reject) => {
    if (isUserLoggedIn()) {
      // 获取用户信息的异步操作
      const userInfo = {
        name: '张三',
        age: 18,
        gender: '男'
      }
      // 获取用户信息成功，将 Promise 对象的状态改为「resolved」
      resolve(userInfo)
    } else {
      // 用户未登录，将 Promise 对象的状态改为「rejected」
      reject('用户未登录')
    }
  })
}

function isUserLoggedIn() {
  return false
}

getUserInfo()
  .then(userInfo => console.log(userInfo))
  .catch(error => console.log(error))

如上代码所示，当用户未登录时，会直接返回错误信息，并使用 reject 方法将 Promise 对象的状态改为「rejected」，这样在调用 getUserInfo 函数时就可以通过 catch 方法来获取错误信息。

综上所述，Promise 的 resolve 和 reject 方法的使用场景和实例的掌握对于我们在前端开发中异步编程非常有用。如果你对 Promise 还不熟悉，可以多看官方文档和相关博客学习，提高自己的技能水平。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d821cda941bf7134e865cf

Promise 的 resolve 和 reject 使用场景实例

接着读