Promise VS Observable 在异步编程时的选择

当执行异步操作时，Promise 和 Observable 是常用的两种技术，这两者有什么区别和优缺点？在不同的情况下该如何选择？本文将详细介绍。

Promise

Promise 是一种JS标准API，并且已经在ES6中被原生支持。它是一种改进的异步处理方式，可以在处理异步操作时解决回调嵌套的问题，并能更好地控制异步操作的状态。Promise 在异步操作成功后，将返回一个值并调用resolve方法，失败的操作返回错误并调用reject方法。

下面是 Promise 的语法格式：

// javascriptcn.com 代码示例
   const promise = new Promise((resolve, reject) => {
    // 异步操作
    if (异步操作成功) {
        resolve(处理结果)
    } else {
        reject(失败原因)
    }
})

promise.then((result) => {
    // 处理结果
}).catch((error) => {
    // 处理错误
})

Promise 的优点：

• Promise 为异步编程提供了简单的解决方案，避免了回调嵌套的问题。
• Promis 可以对异步操作的状态进行更好的控制。
• Promis 代码结构更简洁，可读性更高。

Promise 的缺点：

• Promise 不能取消，一旦创建一个 Promise 就必须等待其执行完成，无法手动取消。
• Promise 不能处理多个异步操作。
• Promise 不能处理异步操作中的错误并从错误中恢复。

Observable

Observable 是一个RxJS库中的概念，在响应式编程中广泛使用。它提供了一种异步处理的方式，并且具有比 Promise 更高的灵活性和可组合性。Observable 在异步操作的时候，将生成一个数据序列，可以对序列中的每个数据进行处理，也可以对序列进行组合和处理。

下面是 Observable 的语法格式：

// javascriptcn.com 代码示例
const observable = new Observable((observer) => {
    // 定义数据序列
    observer.next(value) // 发送每个数据
    observer.error(error) // 捕获错误
    observer.complete() // 收到所有数据后完成序列
})

observable.subscribe((value) => {
    // 处理序列中每个数据
}, (error) => {
    // 处理错误
}, () => {
    // 序列完成
})

Observable 的优点：

• Observable 可以处理多个异步操作并且具有更高的可组合性。
• Observable 可以处理异步操作中的多个状态，包括成功、失败、中间状态等。
• Observable 具有手动取消的特性，可以手动终止异步操作。

Observable 的缺点：

• Observable 可能会变得复杂并且需要更多的代码实现，具有一定的学习成本。
• Observable 代码结构相对复杂，相对于 Promise 可读性较低。

选择 Promise 还是 Observable

当只需要进行一段简单的异步操作的时候，最好使用 Promise。当需要处理多个异步操作，并且需要对异步操作的多个状态进行处理的时候，最好使用 Observable。

下面是 Promise 与 Observable 的对比：

示例代码

下面是一个使用 Promise 和 Observable 的例子。

使用 Promise：

// javascriptcn.com 代码示例
const randomApi = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const number = Math.random() * 10
            if (number > 5) {
                resolve('Success!')
            } else {
                reject('Failed!')
            }
        }, 1000)
    })
}

randomApi().then((result) => {
    console.log(result)
}).catch((error) => {
    console.log(error)
})

使用 Observable：

// javascriptcn.com 代码示例
const { Observable } = require('rxjs')

const randomObserver = new Observable((observer) => {
    setInterval(() => {
        const number = Math.random() * 10
        if (number > 5) {
            observer.next('Success!')
        } else {
            observer.error('Failed!')
        }
    }, 1000)
})

const subscription = randomObserver.subscribe({
    next: (result) => {
        console.log(result)
    },
    error: (error) => {
        console.log(error)
    }
})

setTimeout(() => {
    subscription.unsubscribe()
}, 5000)

总结

在异步操作中，选择 Promise 或 Observable 取决于你的实际需求。如果需要处理简单的异步操作并且只需要返回一个结果，建议选择 Promise。如果需要处理多个数据流，需要对异步操作中的多个状态进行处理，建议选择 Observable。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a0cb67d4982a6ebc69bad