微参考 js JavaScript中`then`方法的用法

JavaScript中`then`方法的用法

在JavaScript中,`then` 方法是Promise对象的一个关键组成部分,用于处理异步操作的成功结果。Promise是一种用于表示异步操作最终完成或失败的对象。当Promise解决(resolve)时,`then` 方法注册的回调函数将被调用,允许开发者设置当Promise成功时的后续操作。

以下是关于`then`方法的详细用法:

基本语法

`then` 方法的基本语法如下:

promise.then(onFulfilled[, onRejected]);

  • `onFulfilled`:当Promise被解决时调用的函数。它是可选的,如果不提供或提供一个非函数类型的值,则被忽略。
  • `onRejected`:当Promise被拒绝时调用的函数。也是可选的。

返回值

`then` 方法本身返回一个新的Promise,允许进行链式调用。其返回值的情况如下:

1. 如果`onFulfilled`或`onRejected`返回一个值,那么新的Promise将会以此值为成功结果(即解决)。

2. 如果`onFulfilled`或`onRejected`抛出一个错误,新的Promise将会以此错误为原因被拒绝。

3. 如果`onFulfilled`或`onRejected`返回一个已经是解决的Promise,新的Promise将会采用这个Promise的状态和值。

4. 如果`onFulfilled`或`onRejected`返回一个已经是拒绝的Promise,新的Promise也会被拒绝。

示例

下面是一个使用`then`方法的例子:

JavaScript中`then`方法的用法

// 创建一个解决的Promise

let promise = new Promise((resolve, reject) => {

resolve('Success');

});

// 使用then方法

promise.then((value) => {

console.log(value); // 'Success'

return value + 'ful';

}).then((value) => {

console.log(value); // 'Successful'

});

在上面的代码中,第一个`then`方法接收到了`’Success’`字符串,然后将其返回,并添加了`’ful’`后缀。第二个`then`方法接收到了修改后的字符串`’Successful’`。

链式调用

`then` 方法经常用于链式调用,以便处理一系列异步操作:

fetch('url/to/data')

.then(response => response.json()) // 解析JSON数据

.then(data => {

// 处理数据

console.log(data);

})

.catch(error => {

// 处理任何链中发生的错误

console.error('Error:', error);

});

在这个链式调用示例中,我们使用`fetch` API请求资源,然后使用`then`来处理返回的响应,接着解析JSON数据,并最终处理数据。

错误处理

通常,我们使用`.catch()`方法来处理链中的任何错误,它实际上是`.then(null, onRejected)`的语法糖。但是,也可以在`then`方法中直接提供错误处理函数:

promise.then(

value => {

// 成功的回调

},

error => {

// 错误的回调

console.error('Error:', error);

}

);

然而,最佳实践是使用`.catch()`,因为它能更明确地标识出错误处理逻辑。

总之,`then`方法是处理异步操作返回的Promise对象时的核心工具,允许开发者以清晰和链式的方式编写异步代码。

本文来自网络,不代表微参考立场,转载请注明出处:http://www.weicankao.com/js/563.html
上一篇
下一篇
返回顶部