使用 Fetch 通过 JavaScript 发送 API POST 请求

使用 Fetch 发送授权的 API POST 请求

这个例子向你展示了如何使用 JavaScript 拿来（） 方法发送带有授权标头和适当错误处理的 POST 请求。

// Solution 1: Simple Fetch API with Authorization
const apiKey = 'your_api_key';
const hashedCredentials = 'your_hashed_credentials';
const url = 'https://authservice.priaid.ch/login?format=json';

fetch(url, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

使用 Fetch 处理授权和请求错误

此方法通过增强错误处理并在查询不成功时提供全面的反馈来确保可靠的 API 通信。

// Solution 2: Fetch with Detailed Error Handling
async function postData() {
  const apiKey = 'your_api_key';
  const hashedCredentials = 'your_hashed_credentials';
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    const data = await response.json();
    console.log('Success:', data);
  } catch (error) {
    console.error('Fetch Error:', error.message);
  }
}
  
postData();

具有获取和单元测试的模块化方法

这种模块化方法包括一个简单的单元测试来验证获取请求并将逻辑划分为函数。

// Solution 3: Modular Fetch Function with Unit Test
const fetchData = async (apiKey, hashedCredentials) => {
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    return await response.json();
  } catch (error) {
    return { success: false, message: error.message };
  }
};

// Unit Test
const testFetchData = async () => {
  const result = await fetchData('your_api_key', 'your_hashed_credentials');
  console.assert(result.success !== false, 'Test Failed: ', result.message);
  console.log('Test Passed:', result);
};

testFetchData();

有关使用 Fetch 的 API POST 请求的常见问题

1. 什么是不记名令牌，为什么它很重要？
2. 用于保护 API 通信的一种身份验证技术是不记名令牌。为了确保服务器知道谁在发出请求，请求通过 Authorization 您的请求中的标头。
3. 为什么我会收到 500 内部服务器错误？
4. 500 错误表明服务器有问题。在您的实例中，这可能是由于向 API 提供的数据错误或格式不正确造成的。 Authorization 标头。
5. 如何处理获取请求中的错误？
6. 为了帮助调试，请使用 try/catch 块在一个 async 功能来检测任何错误并显示它们 console.error()。
7. “Content-Type”标头有什么作用？
8. 您传输到服务器的数据类型由 Content-Type 标头。 'application/json' 通常用于传输 JSON 格式的数据。
9. 我可以在不同的 API 之间重复使用 fetch 函数吗？
10. 是的，您可以通过模块化并提供标头、正文和 API 端点作为参数，轻松地为多个 API 重用 fetch 函数。

关于 API 请求挑战的最终想法

使用外部服务需要您学习如何使用 JavaScript 发送 API POST 请求。通过正确管理错误，您可以显着增加发出经过身份验证的请求的机会，确保 授权 包含标题，并组织 拿来 方法。

诸如 500 内部服务器错误之类的错误通常表明数据或请求结构的格式存在问题。通过仔细的标头管理和彻底的错误消息调试，这些类型的问题很容易修复。