极客教程JavaScript中的Promise.then方法详解
在JavaScript中，Promise是一种用于处理异步操作的对象，它代表了一个异步操作的最终完成或失败，并且其返回值可以在后续的操作中被访问。Promise对象有一个then方法，用于指定当Promise对象状态发生改变时的回调函数。在本文中，我们将详细介绍JavaScript中Promise对象的then方法的用法和示例。
1. then方法的基本用法
Promise对象的then方法接受两个参数：一个用于处理成功状态的回调函数，一个用于处理失败状态的回调函数。当Promise对象的状态发生改变时，then方法会根据Promise对象的状态调用相应的回调函数。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 1000);
});
promise.then((value) => {
console.log(value);
}, (error) => {
console.error(error);
});
Output:
在上面的示例中，我们创建了一个Promise对象，当Promise对象的状态变为成功时，then方法会调用第一个回调函数并输出’Hello, geek-docs.com!’。
2. then方法的链式调用
Promise对象的then方法可以进行链式调用，即在一个then方法中返回一个新的Promise对象，从而实现多个异步操作的顺序执行。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, ');
}, 1000);
});
promise.then((value) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value + 'geek-docs.com!');
}, 1000);
});
}).then((value) => {
console.log(value);
});
Output:
在上面的示例中，我们创建了两个Promise对象，第一个Promise对象在1秒后返回’Hello, ‘，第二个Promise对象在1秒后返回’Hello, geek-docs.com!’，通过then方法的链式调用，实现了两个异步操作的顺序执行。
3. then方法的返回值
Promise对象的then方法会返回一个新的Promise对象，该Promise对象的状态和值取决于then方法中的回调函数的返回值。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 1000);
});
const newPromise = promise.then((value) => {
return value.toUpperCase();
});
newPromise.then((value) => {
console.log(value);
});
Output:
在上面的示例中，then方法中的回调函数返回了value.toUpperCase()，因此newPromise对象的状态为成功，并且值为’HELLO, GEEK-DOCS.COM!’。
4. then方法的错误处理
Promise对象的then方法可以接受两个参数，第一个参数用于处理成功状态，第二个参数用于处理失败状态。如果Promise对象的状态变为失败，then方法会调用第二个参数指定的回调函数。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Something went wrong'));
}, 1000);
});
promise.then((value) => {
console.log(value);
}, (error) => {
console.error(error.message);
});
在上面的示例中，我们创建了一个Promise对象，当Promise对象的状态变为失败时，then方法会调用第二个参数指定的回调函数并输出’Something went wrong’。
5. then方法的多个回调函数
Promise对象的then方法可以接受多个回调函数作为参数，这些回调函数会按照它们被添加的顺序依次执行。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 1000);
});
promise.then((value) => {
console.log(value);
});
promise.then((value) => {
console.log(value.toUpperCase());
});
Output:
在上面的示例中，我们创建了一个Promise对象，然后分别添加了两个回调函数到then方法中，这两个回调函数会依次执行并输出’Hello, geek-docs.com!’和’HELLO, GEEK-DOCS.COM!’。
6. then方法的参数传递
Promise对象的then方法可以接受一个参数，该参数是一个函数，该函数的参数是上一个Promise对象的值，可以将上一个Promise对象的值传递给下一个Promise对象。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, ');
}, 1000);
});
promise.then((value) => {
return value + 'geek-docs.com!';
}).then((value) => {
console.log(value);
});
Output:
在上面的示例中，第一个then方法中的回调函数返回了value + ‘geek-docs.com!’，将上一个Promise对象的值传递给了下一个Promise对象。
7. then方法的错误传递
Promise对象的then方法可以接受两个参数，第一个参数用于处理成功状态，第二个参数用于处理失败状态。如果Promise对象的状态变为失败，then方法会将错误传递给下一个Promise对象。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Something went wrong'));
}, 1000);
});
promise.then((value) => {
console.log(value);
}).catch((error) => {
console.error(error.message);
});
在上面的示例中，我们创建了一个Promise对象，当Promise对象的状态变为失败时，then方法会将错误传递给catch方法，并输出’Something went wrong’。
8. then方法的finally方法
Promise对象的then方法还可以接受一个finally方法，该方法会在Promise对象的状态变为成功或失败时都会执行。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 1000);
});
promise.then((value) => {
console.log(value);
}).finally(() => {
console.log('Finally!');
});
Output:
在上面的示例中，我们创建了一个Promise对象，当Promise对象的状态变为成功时，finally方法会执行并输出’Finally!’。
9. then方法的静态方法
Promise对象还有一些静态方法，可以用于处理多个Promise对象的状态。
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, ');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('geek-docs.com!');
}, 1000);
});
Promise.all([promise1, promise2]).then((values) => {
console.log(values.join(''));
});
Output:
在上面的示例中，我们创建了两个Promise对象，使用Promise.all方法将这两个Promise对象组合在一起，当所有Promise对象的状态都变为成功时，then方法会执行并输出’Hello, geek-docs.com!’。
10. then方法的异步操作
Promise对象的then方法可以用于处理异步操作，可以在then方法中进行异步操作并返回一个新的Promise对象。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, ');
}, 1000);
});
promise.then((value) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value + 'geek-docs.com!');
}, 1000);
});
}).then((value) => {
console.log(value);
});
Output:
在上面的示例中，我们创建了一个Promise对象，在第一个then方法中进行了异步操作，并返回一个新的Promise对象，实现了异步操作的顺序执行。
11. then方法的超时处理
Promise对象的then方法还可以用于处理超时操作，可以在then方法中设置一个超时时间，当超过指定时间后，执行超时处理。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 2000);
});
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Timeout'));
}, 1000);
});
Promise.race([promise, timeoutPromise]).then((value) => {
console.log(value);
}).catch((error) => {
console.error(error.message);
});
在上面的示例中，我们创建了一个Promise对象和一个超时Promise对象，使用Promise.race方法将这两个Promise对象组合在一起，当其中一个Promise对象先完成时，then方法会执行并输出’Hello, geek-docs.com!’，如果超时Promise对象先完成，则会执行catch方法并输出’Timeout’。
12. then方法的多个并行操作
Promise对象的then方法还可以用于处理多个并行操作，可以在then方法中同时处理多个Promise对象。
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, ');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('geek-docs.com!');
}, 1000);
});
Promise.all([promise1, promise2]).then((values) => {
console.log(values.join(''));
});
Output:
在上面的示例中，我们创建了两个Promise对象，使用Promise.all方法将这两个Promise对象组合在一起，当所有Promise对象的状态都变为成功时，then方法会执行并输出’Hello, geek-docs.com!’。
13. then方法的条件处理
Promise对象的then方法还可以用于条件处理，可以根据条件来决定是否执行回调函数。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 1000);
});
const condition = true;
promise.then((value) => {
if (condition) {
console.log(value);
}
});
Output:
在上面的示例中，我们创建了一个Promise对象，根据条件condition的值来决定是否执行回调函数并输出’Hello, geek-docs.com!’。
14. then方法的数据处理
Promise对象的then方法还可以用于数据处理，可以在then方法中对数据进行处理并返回新的数据。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 1000);
});
promise.then((value) => {
return value.toUpperCase();
}).then((value) => {
console.log(value);
});
Output:
在上面的示例中，我们创建了一个Promise对象，在第一个then方法中对数据进行处理并返回新的数据，然后在第二个then方法中输出处理后的数据。
15. then方法的错误处理
Promise对象的then方法还可以用于错误处理，可以在then方法中捕获错误并进行处理。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Something went wrong'));
}, 1000);
});
promise.then((value) => {
console.log(value);
}).catch((error) => {
console.error(error.message);
});
在上面的示例中，我们创建了一个Promise对象，当Promise对象的状态变为失败时，then方法会调用catch方法来捕获错误并输出’Something went wrong’。
16. then方法的数据传递
Promise对象的then方法还可以用于数据传递，可以在then方法中将数据传递给下一个Promise对象。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, ');
}, 1000);
});
promise.then((value) => {
return value + 'geek-docs.com!';
}).then((value) => {
console.log(value);
});
Output:
在上面的示例中，我们创建了一个Promise对象，在第一个then方法中将数据传递给下一个Promise对象，并输出’Hello, geek-docs.com!’。
17. then方法的错误传递
Promise对象的then方法还可以用于错误传递，可以在then方法中将错误传递给下一个Promise对象。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Something went wrong'));
}, 1000);
});
promise.then((value) => {
console.log(value);
}).catch((error) => {
console.error(error.message);
});
在上面的示例中，我们创建了一个Promise对象，当Promise对象的状态变为失败时，then方法会将错误传递给catch方法并输出’Something went wrong’。
18. then方法的链式操作
Promise对象的then方法还可以用于链式操作，可以在then方法中进行多个操作并返回新的Promise对象。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, ');
}, 1000);
});
promise.then((value) => {
return value + 'geek-docs.com!';
}).then((value) => {
return value.toUpperCase();
}).then((value) => {
console.log(value);
});
Output:
在上面的示例中，我们创建了一个Promise对象，在第一个then方法中进行了操作并返回新的数据，然后在第二个then方法中进行另一个操作并返回新的数据，最后输出处理后的数据。
19. then方法的异步处理
Promise对象的then方法还可以用于异步处理，可以在then方法中进行异步操作并返回新的Promise对象。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, ');
}, 1000);
});
promise.then((value) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value + 'geek-docs.com!');
}, 1000);
});
}).then((value) => {
console.log(value);
});
Output:
在上面的示例中，我们创建了一个Promise对象，在第一个then方法中进行了异步操作并返回新的Promise对象，实现了异步处理。
20. then方法的超时处理
Promise对象的then方法还可以用于超时处理，可以在then方法中设置一个超时时间，当超过指定时间后执行超时处理。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 2000);
});
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Timeout'));
}, 1000);
});
Promise.race([promise, timeoutPromise]).then((value) => {
console.log(value);
}).catch((error) => {
console.error(error.message);
});
在上面的示例中，我们创建了一个Promise对象和一个超时Promise对象，使用Promise.race方法将这两个Promise对象组合在一起，当其中一个Promise对象先完成时，then方法会执行并输出’Hello, geek-docs.com!’，如果超时Promise对象先完成，则会执行catch方法并输出’Timeout’。
21. then方法的多个并行操作
Promise对象的then方法还可以用于处理多个并行操作，可以在then方法中同时处理多个Promise对象。
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, ');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('geek-docs.com!');
}, 1000);
});
Promise.all([promise1, promise2]).then((values) => {
console.log(values.join(''));
});
Output:
在上面的示例中，我们创建了两个Promise对象，使用Promise.all方法将这两个Promise对象组合在一起，当所有Promise对象的状态都变为成功时，then方法会执行并输出’Hello, geek-docs.com!’。
22. then方法的条件处理
Promise对象的then方法还可以用于条件处理，可以根据条件来决定是否执行回调函数。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 1000);
});
const condition = true;
promise.then((value) => {
if (condition) {
console.log(value);
}
});
Output:
在上面的示例中，我们创建了一个Promise对象，根据条件condition的值来决定是否执行回调函数并输出’Hello, geek-docs.com!’。
23. then方法的数据处理
Promise对象的then方法还可以用于数据处理，可以在then方法中对数据进行处理并返回新的数据。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, geek-docs.com!');
}, 1000);
});
promise.then((value) => {
return value.toUpperCase();
}).then((value) => {
console.log(value);
});
Output:
在上面的示例中，我们创建了一个Promise对象，在第一个then方法中对数据进行处理并返回新的数据，然后在第二个then方法中输出处理后的数据。