如何修改Axios异步函数getProvinces使返回的省市数据按拼音顺序排列

Golang的map类型为无序哈希表，遍历过程不会保留初始化阶段的插入顺序，因此后端接口返回的省份列表顺序和initProvinces()中的定义顺序不一致。

方案1：后端修改（更推荐，一次修改全端生效） #

修改接口返回逻辑，不要直接遍历provinceCities map生成返回值，先预定义按预期顺序排列的省份名称切片，按切片顺序从map中读取数据组装返回结果即可。
示例代码：

// 预定义按拼音顺序排列的省份列表，按业务需要的顺序补全所有省份即可
var provinceOrder = []string{"安徽省", "北京市", "重庆市", "福建省", ...}

func getProvincesHandler() []interface{} {
    var result []interface{}
    // 按预设顺序遍历取数
    for _, provinceName := range provinceOrder {
        cities, ok := provinceCities[provinceName]
        if !ok {
            continue
        }
        result = append(result, map[string]interface{}{
            "province": provinceName,
            "cities": cities,
            "autoPopulate": len(cities) == 1, // 按原有业务逻辑赋值即可
        })
    }
    return result
}

方案2：前端修改getProvinces()函数 #

如果无法调整后端逻辑，可以在前端拿到返回结果后，按中文拼音首字母排序后再返回。
修改后的代码：

export async function getProvinces() {
  const result = await axios.get(
    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/info/provinces`
  );
  // 按省份名称中文拼音排序
  return result.data.sort((a, b) => a.province.localeCompare(b.province, 'zh-CN'));
}

如果还需要对每个省份下的城市也按拼音排序，可扩展为如下逻辑：

export async function getProvinces() {
  const result = await axios.get(
    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/info/provinces`
  );
  return result.data
    .sort((a, b) => a.province.localeCompare(b.province, 'zh-CN'))
    .map(provinceItem => {
      provinceItem.cities.sort((cityA, cityB) => cityA.localeCompare(cityB, 'zh-CN'))
      return provinceItem
    });
}

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