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

news2024/11/26 22:27:01

在这里插入图片描述
在前端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>