如何正确处理 JavaScript 中返回 Promise 的 API 调用-js教程-PHP中文网

如何正确处理 JavaScript 中返回 Promise 的 API 调用

本文详解如何在前端 JavaScript 中正确调用返回 Promise 的 PHP API，并同步获取加密后的密码字符串，避免因忽略异步特性导致 undefined 或逻辑错误。

本文详解如何在前端 javascript 中正确调用返回 promise 的 php api，并同步获取加密后的密码字符串，避免因忽略异步特性导致 `undefined` 或逻辑错误。

在现代 Web 开发中，使用 fetch() 发起的 API 请求默认返回一个 Promise 对象，而非直接返回结果值。许多开发者初接触时容易误将 Promise 当作最终数据使用（例如直接 alert(contrasena)），结果弹出 [object Promise] 或 undefined —— 这正是你当前遇到的问题根源。

你的 PHP 后端脚本 /api/hash_input.php 逻辑基本正确：从数据库读取 salt，拼接密码后执行 SHA-512 哈希并 echo 结果（注意：return $request; 在脚本顶层无效，应使用 echo 输出；已修正）。但关键在于前端必须等待 Promise 解析完成才能拿到真实哈希值。

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

✅ 正确做法：两种等效方式

方式一：使用 .then() 链式调用（兼容性更广）

const contrasena = document.getElementById("InputPasswordSignup").value.trim();
if (contrasena) {
  hashContrasena(contrasena).then(hashedPassword => {
    console.log('Hashed password:', hashedPassword); // ✅ 实际字符串
    alert(`Hash: ${hashedPassword}`);
    sql = sql.concat(" contraseña = '", hashedPassword, "',");
    // 继续后续操作，如提交表单或发起下一步请求
  }).catch(err => {
    console.error('Password hashing failed:', err);
    alert('密码加密失败，请重试');
  });
}

async function hashContrasena(pass) {
  const res = await fetch('/api/hash_input.php', {
    method: 'POST',
    body: pass,
    headers: { 'Content-Type': 'text/plain' } // 明确声明发送纯文本
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
  return await res.text(); // ✅ 返回解析后的字符串
}

方式二：在 async 函数内用 await（更简洁，需调用上下文为 async）

async function handleSubmit() {
  const contrasena = document.getElementById("InputPasswordSignup").value.trim();
  if (!contrasena) return;

  try {
    const hashedPassword = await hashContrasena(contrasena);
    console.log('Hashed:', hashedPassword);
    sql = sql.concat(" contraseña = '", hashedPassword, "',");
    // 执行 SQL 提交或其他逻辑
  } catch (err) {
    console.error(err);
    alert('加密过程出错');
  }
}

⚠️ 关键注意事项

PHP 端无需 return，必须 echo：return 仅在函数内有效；脚本顶层应 echo $request; 并确保无额外输出（如空格、BOM、错误提示），否则 res.text() 会包含杂项内容。
设置 Content-Type：fetch 默认不带 Content-Type，PHP 可能无法正确识别请求体。建议显式添加 headers: { 'Content-Type': 'text/plain' }。
服务端安全加固（强烈建议）：
- 使用 mysqli_real_escape_string() 或（更优）预处理语句防止 SQL 注入；
- 避免在 SQL 中直接拼接用户输入（如 $usuario）；
- hash('sha512', ...) 已过时，推荐改用 password_hash() + password_verify() 组合。