JS调用接口|极客笔记

JS调用接口

在Web开发中，经常会遇到需要与后端接口进行交互的情况，而JavaScript是一种常用的编程语言，用于实现前端逻辑。本文将详细介绍如何使用JavaScript调用接口实现数据的请求和处理。

XMLHttpRequest

在Web开发的早期阶段，开发者通常会使用XMLHttpRequest对象来实现与服务器端的数据交互。XMLHttpRequest对象是浏览器提供的内置对象，用于发送HTTP请求和接收服务器响应。

使用XMLHttpRequest发送GET请求

以下是使用XMLHttpRequest对象发送GET请求的示例代码：

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

上面的代码首先创建了一个XMLHttpRequest对象，然后调用open方法指定了请求的方法和URL，并设置为异步请求。接着通过onreadystatechange事件监听器来监听请求状态的变化，当请求完成并且服务器返回状态码为200时，通过JSON.parse方法解析服务器返回的数据，并输出到控制台。

使用XMLHttpRequest发送POST请求

下面是使用XMLHttpRequest对象发送POST请求的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
var data = {
    name: 'John Doe',
    age: 30
};
xhr.send(JSON.stringify(data));

上面的代码中，首先创建了一个XMLHttpRequest对象，然后调用open方法指定了请求的方法和URL，并设置为异步请求。接着通过setRequestHeader方法设置请求头，指定请求的数据格式为JSON。最后通过send方法发送POST请求，并将数据通过JSON.stringify方法转换为JSON字符串发送到服务器端。

Fetch API

随着Web技术的不断发展，Fetch API逐渐取代了XMLHttpRequest成为了主流的数据请求方式。Fetch API提供了更加现代化和强大的接口，使得数据请求变得更加简洁和灵活。

使用Fetch API发送GET请求

以下是使用Fetch API发送GET请求的示例代码：

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

上面的代码中，使用fetch函数发送一个GET请求，它返回一个Promise对象。在Promise对象的then方法中处理服务器返回的响应数据，并通过json方法将响应数据解析为JSON格式。最后在then方法中输出解析后的数据，catch方法中捕获错误并输出到控制台。

使用Fetch API发送POST请求

以下是使用Fetch API发送POST请求的示例代码：

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'John Doe',
        age: 30
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

上面的代码中，使用fetch函数发送一个POST请求，并通过传入第二个参数配置请求的方法、请求头和请求体。同样在Promise对象的then方法中处理服务器返回的响应数据，并输出到控制台；在catch方法中捕获错误信息。

Axios

除了原生的XMLHttpRequest和Fetch API，还有第三方库Axios可用于简化数据请求的操作，Axios提供了更加方便和灵活的接口。

使用Axios发送GET请求

以下是使用Axios发送GET请求的示例代码：

axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

上面的代码中，使用axios.get方法发送一个GET请求，并且在Promise对象的then方法中处理服务器返回的数据，并输出到控制台；在catch方法中捕获错误信息。

使用Axios发送POST请求

以下是使用Axios发送POST请求的示例代码：

axios.post('https://api.example.com/data', {
    name: 'John Doe',
    age: 30
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

上面的代码中，使用axios.post方法发送一个POST请求，并且在Promise对象的then方法中处理服务器返回的数据，并输出到控制台；在catch方法中捕获错误信息。