AJAX返回坐标代码优化及async立即执行函数使用必要性咨询

优化实现方案 #

后端（PHP侧）优化 #

原有使用|拼接响应内容的方案容错率极低，若返回值本身包含分隔符会直接导致前端解析失败，且扩展性差，后续新增返回字段成本很高，推荐改为JSON格式返回：

// php logic gets values
header('Content-Type: application/json');
echo json_encode([
    'lat' => $mar['lat'],
    'lon' => $mar['lon']
]);

前端侧优化 #

原有代码存在未声明变量的问题：crd、lat、lon没有定义变量作用域，会隐式成为全局变量，极易引发命名冲突，可按以下方向优化：

• fetch 传入 URLSearchParams 类型的请求体时，会自动配置正确的Content-Type: application/x-www-form-urlencoded; charset=UTF-8请求头，无需手动声明，可简化代码
• 配合后端返回的JSON格式，直接调用res.json()解析响应，不需要手动拆分字符串，解析逻辑更稳定
• 增加异常捕获逻辑，覆盖网络异常、请求失败、响应解析失败等边界场景

优化后代码（ES模块环境，支持顶级await）：

try {
    const url = new URL("/ajax-page", window.location.origin);
    const body = new URLSearchParams([["sl", slug]]);

    const res = await fetch(url, {
        method: "POST",
        body
    });

    if (!res.ok) {
        throw new Error(`请求异常，状态码：${res.status}`);
    }
    const { lat, lon } = await res.json();
    console.log(lat, lon);
} catch (err) {
    // 可根据业务需求自定义错误提示逻辑
    console.error("获取坐标失败：", err);
}

关于(async () => {...})()写法的必要性 #

是否需要使用该写法完全取决于你的代码运行环境：

• 若你的script标签添加了type="module"属性（即作为ES模块运行），或运行在Node.js 14.8+版本环境中，原生支持顶级await，不需要额外包裹async立即执行函数，可直接在代码顶层写await逻辑
• 若使用无type="module"的普通脚本，浏览器不支持在顶层作用域使用await，要在顶层执行异步逻辑时，仍需要用async立即执行函数包裹

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