创建Promise化排序函数并链式调用实现员工列表按名称排序

需求概述 #

需要创建一个Promise化的函数，对员工列表按名称排序，并将其链式调用到已有的Promise流程中。

现有代码 #

function arr() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(employeeDetailsArray);
        }, 2000);
    });
}

arr()
.then(function(result) {
    console.log(result); 
    return arr();
})
.then() ////code to sort by name, output should be sorted list of employee details by name

const employeeDetailsArray = [
  { name: 'boss', email: 'boss@gmail.com', age: 22 },
  { name: 'avid', email: 'avid@gmail.com', age: 60 },
  { name: 'rajam', email: 'rajam@gmail.com', age: 75 },
  { name: 'dam', email: 'dam@gmail.com', age: 45 }
]

预期输出 #

• 2秒后输出原数组：

[
  { name: 'boss', email: 'boss@gmail.com', age: 22 },
  { name: 'avid', email: 'avid@gmail.com', age: 60 },
  { name: 'rajam', email: 'rajam@gmail.com', age: 75 },
  { name: 'dam', email: 'dam@gmail.com', age: 45 }
]

• 随后输出按名称排序后的数组：

[
  { name: 'avid', email: 'avid@gmail.com', age: 60 },
  { name: 'boss', email: 'boss@gmail.com', age: 22 },
  { name: 'dam', email: 'dam@gmail.com', age: 45 }, 
  { name: 'rajam', email: 'rajam@gmail.com', age: 75 }
]

解决方案 #

创建Promise化的排序函数，再将其接入链式调用流程：

function arr() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(employeeDetailsArray);
        }, 2000);
    });
}

// 定义Promise化的排序函数
function sortEmployeesByName(employees) {
    return new Promise((resolve) => {
        // 拷贝原数组后排序，避免修改原数据
        const sortedList = [...employees].sort((a, b) => {
            return a.name.localeCompare(b.name);
        });
        resolve(sortedList);
    });
}

arr()
.then(function(result) {
    console.log(result); 
    return arr();
})
.then(function(employees) {
    // 调用排序函数并返回其Promise
    return sortEmployeesByName(employees);
})
.then(function(sortedEmployees) {
    console.log(sortedEmployees);
});

const employeeDetailsArray = [
  { name: 'boss', email: 'boss@gmail.com', age: 22 },
  { name: 'avid', email: 'avid@gmail.com', age: 60 },
  { name: 'rajam', email: 'rajam@gmail.com', age: 75 },
  { name: 'dam', email: 'dam@gmail.com', age: 45 }
]

关键说明 #

1. sortEmployeesByName函数接收员工数组，内部通过localeCompare实现名称的自然排序，同时用扩展运算符[...employees]拷贝原数组，避免修改原始数据。
2. 在第二个then中，接收上一步返回的员工数组，调用排序函数并返回其Promise，后续then就能拿到排序后的结果并输出。

内容的提问来源于stack exchange，提问作者Raj