如何进行API调用并使用JavaScript处理响应？

我可以为你详细解释如何通过JavaScript进行API调用，以下是一个完整的示例，包括如何发送GET和POST请求，以及如何处理响应数据。

使用原生的 `fetch` API

1.1 发送GET请求

// 定义API的URL
const apiUrl = 'https://api.example.com/data';
// 使用fetch发送GET请求
fetch(apiUrl)
  .then(response => {
    // 检查响应状态码
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json(); // 将响应解析为JSON
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

1.2 发送POST请求

// 定义API的URL
const apiUrl = 'https://api.example.com/submit';
// 定义要发送的数据
const postData = {
  key1: 'value1',
  key2: 'value2'
};
// 使用fetch发送POST请求
fetch(apiUrl, {
  method: 'POST', // HTTP方法
  headers: {
    'Content-Type': 'application/json' // 设置请求头
  },
  body: JSON.stringify(postData) // 将JavaScript对象转换为JSON字符串
})
  .then(response => {
    // 检查响应状态码
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json(); // 将响应解析为JSON
  })
  .then(data => {
    console.log('Response from server:', data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

使用第三方库（Axios）

Axios是一个基于Promise的HTTP客户端，可以简化HTTP请求，首先需要安装Axios：

npm install axios

2.1 发送GET请求

// 引入axios库
const axios = require('axios');
// 定义API的URL
const apiUrl = 'https://api.example.com/data';
// 使用axios发送GET请求
axios.get(apiUrl)
  .then(response => {
    console.log('Data received:', response.data);
  })
  .catch(error => {
    console.error('There has been a problem with your axios operation:', error);
  });

2.2 发送POST请求

// 引入axios库
const axios = require('axios');
// 定义API的URL
const apiUrl = 'https://api.example.com/submit';
// 定义要发送的数据
const postData = {
  key1: 'value1',
  key2: 'value2'
};
// 使用axios发送POST请求
axios.post(apiUrl, postData)
  .then(response => {
    console.log('Response from server:', response.data);
  })
  .catch(error => {
    console.error('There has been a problem with your axios operation:', error);
  });

处理错误和超时设置

无论是使用原生的fetch API还是第三方库，都可以添加更多的错误处理和超时设置来增强健壮性。

3.1 使用fetch 设置超时

const controller = new AbortController();
const id = setTimeout(() => controller.abort(), 5000); // 5秒后终止请求
fetch(apiUrl, { signal: controller.signal })
  .then(response => {
    clearTimeout(id); // 清除超时计时器
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Fetch request timed out');
    } else {
      console.error('There has been a problem with your fetch operation:', error);
    }
  });

3.2 使用 Axios 设置超时

const axios = require('axios');
const CancelToken = axios.CancelToken;
let cancel;
axios.get(apiUrl, {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  }),
  timeout: 5000 // 5秒超时
})
  .then(response => {
    console.log('Data received:', response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.error('Request cancelled', thrown.message);
    } else {
      console.error('There has been a problem with your axios operation:', thrown);
    }
  });

是关于如何使用JavaScript进行API调用的一些详细示例，根据你的具体需求，你可以选择使用原生的fetch API或者像Axios这样的第三方库来进行API调用，并添加适当的错误处理和超时设置。

各位小伙伴们，我刚刚为大家分享了有关“api调用 js”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！