一文讲透 JavaScript 异步处理：Promise 到底是什么？

在学习 JavaScript 的过程中，异步编程是一个绕不开的话题。很多初学者在刚接触 Promise 时都会觉得有些抽象：

• 为什么 JavaScript 需要异步？

• Promise 到底解决了什么问题？

• then()、catch() 是怎么工作的？

这篇文章将用 最通俗的方式，一步一步讲清楚 JavaScript 中的 Promise 异步处理机制。

---

一、为什么 JavaScript 需要异步处理？

在浏览器中，JavaScript 是 单线程执行的。

这意味着 同一时间只能执行一件事情。

例如下面这段代码：

let data = fetch("https://api.example.com/user")
console.log(data)

如果 fetch() 请求服务器需要 2 秒钟才返回结果，那么如果采用同步方式，浏览器就必须 卡住等待 2 秒。

显然这是不可接受的。

因此 JavaScript 采用 异步机制：

请求先发出去，代码继续执行，等结果回来再处理。

而 Promise 就是用来管理这种异步结果的对象。

---

二、什么是 Promise？

简单来说：

Promise 是一个用于表示“未来某个时间会完成的任务结果”的对象。

可以用一个生活中的例子理解：

假设你在外卖平台点了一份外卖。

订单会经历三个状态：

状态	含义
等待接单	pending
外卖送达	fulfilled
订单取消	rejected

Promise 也是这三种状态：

pending （等待中）
fulfilled （成功）
rejected （失败）

一旦状态改变，就 不会再发生变化。

---

三、创建一个 Promise

创建 Promise 的基本语法如下：

let p = new Promise(function(resolve, reject) {

    setTimeout(() => {
        resolve("数据获取成功")
    }, 2000)

})

这里的两个参数非常重要：

参数	作用
resolve	表示任务成功
reject	表示任务失败

代码含义是：

两秒后任务成功，并返回结果。

---

四、使用 then 获取结果

Promise 的结果需要通过 then() 方法获取。

p.then(function(res){
console.log(res)
})

完整代码：

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

    setTimeout(()=>{
        resolve("任务完成")
    },2000)

})

p.then(res=>{
    console.log(res)
})

执行流程：

创建 Promise
↓
2秒后 resolve
↓
then 接收到结果
↓
打印结果

输出：

任务完成

---

五、处理失败情况 catch

如果任务执行失败，可以使用 catch() 捕获错误。

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

    reject("服务器错误")

})

p.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

输出结果：

服务器错误

因此常见的 Promise 结构是：

Promise
↓
then() 处理成功
catch()处理失败

---

六、Promise 解决了什么问题？

在 Promise 出现之前，JavaScript 主要依赖 回调函数（callback） 处理异步。

例如：

getUser(function(user){

    getOrder(user.id,function(order){

        getPay(order.id,function(pay){

        })

    })

})

这种代码结构会变成：

函数
└函数
└函数
└函数

这种情况被称为：

回调地狱（Callback Hell）

代码可读性极差，也非常难维护。

---

使用 Promise 之后可以写成：

getUser()
.then(user => getOrder(user.id))
.then(order => getPay(order.id))
.then(pay => console.log(pay))

代码结构会变成：

then
then
then

逻辑更加清晰。

---

七、Promise 的链式调用

Promise 最大的优势之一是 链式调用。

示例代码：

new Promise((resolve)=>{
    resolve(1)
})
.then(res=>{
    console.log(res)
    return res + 1
})
.then(res=>{
    console.log(res)
})

执行结果：

1
2

原因是：

then 返回值
↓
会变成新的 Promise
↓
传递给下一个 then

---

八、现代写法：async / await

在现代 JavaScript 中，更常见的写法是：

async function test(){

    let res = await fetch("/api")

    console.log(res)

}

其实：

async/await
=
Promise 的语法糖

等价写法：

fetch("/api").then(res=>{
console.log(res)
})

---

九、Promise 执行流程图

Promise 的执行流程如下：

new Promise
│
│
pending
│ │
│ │
resolve reject
│ │
fulfilled rejected
│ │
then catch

---

十、Promise 常见应用场景

在实际开发中，Promise 被广泛应用在以下场景：

1 网络请求

fetch()
axios()

2 定时任务

setTimeout Promise封装

3 WebAssembly

WebAssembly.instantiate()

4 文件读取

FileReader

---

十一、总结

简单总结一下 Promise 的核心概念：

• Promise 是 异步任务结果的容器

• Promise 有 三种状态

  • pending

  • fulfilled

  • rejected

• 使用 then() 处理成功结果

• 使用 catch() 处理错误

• Promise 可以 链式调用

• async/await 本质是 Promise 的语法糖

一句话总结：

Promise 让 JavaScript 的异步代码可以像同步代码一样按顺序编写。

---

如果你正在深入学习 JavaScript 异步机制，建议继续了解：

• 事件循环（Event Loop）

• 宏任务与微任务

• Promise 执行顺序

这些才是 JavaScript 异步编程的真正核心。