如何进行API调用并使用JavaScript实现？

基本API调用

// 定义API的URL
const apiUrl = 'https://jsonplaceholder.typicode.com/posts';
// 使用fetch函数进行API调用
fetch(apiUrl)
  .then(response => {
    // 检查响应状态码是否为200-299之间，表示成功
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    // 解析响应数据为JSON格式
    return response.json();
  })
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('There has been a problem with your fetch operation:', error);
  });

带有参数的API调用

有时你可能需要向API发送一些参数，比如查询参数或请求体，下面是一个例子，展示了如何在GET请求中添加查询参数以及在POST请求中发送请求体。

2.1 GET请求带查询参数

// 定义API的URL和查询参数
const apiUrl = 'https://jsonplaceholder.typicode.com/posts';
const params = new URLSearchParams({
  userId: 1,
  title: 'example'
});
// 使用fetch函数进行API调用，并在URL中添加查询参数
fetch(${apiUrl}?${params.toString()})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

2.2 POST请求带请求体

// 定义API的URL
const apiUrl = 'https://jsonplaceholder.typicode.com/posts';
// 定义请求体数据
const postData = {
  userId: 1,
  title: 'foo',
  body: 'bar'
};
// 使用fetch函数进行POST请求，并在请求体中发送数据
fetch(apiUrl, {
  method: 'POST', // 指定请求方法为POST
  headers: {
    'Content-Type': 'application/json' // 指定请求头中的Content-Type为application/json
  },
  body: JSON.stringify(postData) // 将请求体数据转换为JSON字符串
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

3. 异步/等待语法 (Async/Await)

为了提高代码的可读性，你可以使用async/await语法来进行API调用，下面是一个示例：

// 定义一个异步函数进行API调用
async function fetchPosts() {
  const apiUrl = 'https://jsonplaceholder.typicode.com/posts';
  try {
    // 发起API请求并等待响应
    const response = await fetch(apiUrl);
    // 如果响应状态码不是200-299之间，抛出错误
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    // 解析响应数据为JSON格式
    const data = await response.json();
    // 处理获取到的数据
    console.log(data);
  } catch (error) {
    // 处理错误
    console.error('There has been a problem with your fetch operation:', error);
  }
}
// 调用异步函数
fetchPosts();

是一些基本的API调用示例，希望对你有所帮助，如果你有更多具体的问题或需求，欢迎继续提问！

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