JavaScript 为什么我们使用then()方法

JavaScript中的then()方法在Promise API中被定义，并用于处理异步任务，如API调用。以前，我们使用回调函数来处理这个任务，但这使得代码难以维护。

语法：

demo().then(
    (onResolved) => {
        // Some task on success
    },
    (onRejected) => {
        // Some task on failure
    }
)

Note: demo is a function that returns a promise prototype.

参数： 该函数有两个参数，用于处理promise的成功或拒绝：

• onFulfilled： 这是一个在promise成功时调用的函数。这是一个可选参数。
• onRejected： 这是一个在promise被拒绝时调用的函数。这是一个可选参数。

返回值： 此方法可以返回一个Promise（如果进一步调用then()方法），或者什么也不返回。

示例1：不传递参数

function demo() { 
    console.log("Function called!!<br>") 
    return Promise.resolve("Success"); 
    // or 
    // return Promise.reject("Failure"); 
} 
demo().then()

输出：

Function called!!

示例2：仅传递第一个回调函数

function demo() { 
    console.log("Function called!!") 
    return Promise.resolve("Success"); 
    // or 
    // return Promise.reject("Failure"); 
} 
demo().then( 
    (message) => { 
        console.log("Then success:" + message); 
    } 
)

输出：

Function called!!
Then success:Success

注意，如果demo函数返回一个拒绝，那么会生成一个错误。

示例3： 同时传递两个参数

function demo() { 
    console.log("Function called!!") 
    return Promise.resolve("Success"); 
    // or 
    // return Promise.reject("Failure"); 
} 
demo().then( 
    (message) => { 
        console.log("Then success:" + message); 
    }, 
    (message) => { 
        console.log("Then failure:" + message); 
    } 
)

输出：

Function called!!
Then success:Success

示例 4： 链接多个 then() 方法。

每个 then() 方法都可以返回一个 promise （一个 resolve 或一个 reject），因此可以将多个 then() 方法链在一起。

function demo() { 
    console.log("Function called!!") 
    return Promise.resolve(1); 
    // or 
    // return Promise.reject("Failure"); 
} 
demo().then( 
    (value) => { 
        console.log(value); 
    return ++value; 
    }, 
    (message) => { 
        console.log(message); 
    } 
    ).then( 
    (value) => { 
        console.log(value); 
    }, 
    (message) => { 
        console.log(message); 
    } 
)

输出：

Function called!!
12 

示例5： 使用then()作为异步函数

var demo = new Promise((resolve, reject) => { 
    resolve(1); 
}) 
let call = demo.then( 
    (value) => { 
        console.log(value); 
        return ++value; 
    }, 
    (message) => { 
        console.log(message); 
    }); 
    console.log(call); 
    setTimeout(() => { 
    console.log(call); 
});

输出：

Promise {status: "pending"}
1
Promise {status: "resolved", result: 2}

支持的浏览器：

• Google Chrome 6.0及以上版本
• Internet Explorer 9.0及以上版本
• Mozilla 4.0及以上版本
• Opera 11.1及以上版本
• Safari 5.0及以上版本