前端面试题13（API请求方法）

在这里插入图片描述
在前端JavaScript中，进行API请求主要可以通过几种方式来实现，最常见的是使用XMLHttpRequest（较旧的方法）、fetch（现代浏览器推荐方法）以及使用第三方库如axios或jQuery.ajax等。

1. XMLHttpRequest

这是最早支持Ajax请求的方式，适用于所有现代浏览器和一些较老的浏览器。

function makeRequest() {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}};xhr.open("GET", "https://api.example.com/data", true);xhr.send();
}

2. Fetch API

Fetch API是更现代、更灵活的请求方式，它返回Promise，可以与async/await一起使用，使得异步代码更加清晰。

async function fetchData() {try {const response = await fetch("https://api.example.com/data");if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();console.log(data);} catch (error) {console.error('There was a problem with the fetch operation:', error);}
}fetchData();

3. Axios

Axios是一个基于Promise的HTTP库，可同时在浏览器和node.js中使用。需要先通过npm或CDN引入。

<!-- 引入axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>
axios.get("https://api.example.com/data").then(response => {console.log(response.data);}).catch(error => {console.error("Error fetching data:", error);});
</script>

或者在模块化环境中：

import axios from 'axios';async function getData() {try {const response = await axios.get("https://api.example.com/data");console.log(response.data);} catch (error) {console.error("Error fetching data:", error);}
}getData();

4. jQuery.ajax

如果你的项目中已经使用了jQuery库，也可以使用其提供的.ajax()方法。

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
$.ajax({url: "https://api.example.com/data",method: "GET",success: function(data) {console.log(data);},error: function(jqXHR, textStatus, errorThrown) {console.error("Error:", textStatus, errorThrown);}
});
</script>