JavaScript 网络请求

本文介绍 JavaScript 中发送网络请求的几种方式。

原生浏览器环境

浏览器中可以使用 AJAX 技术发送请求，具体来说有两种方法，使用 XMLHttpRequest 对象或 fetch API。

AJAX（Asynchronous JavaScript and XML）是一种用于在不重新加载整个网页的情况下与服务器进行通信的技术。它允许网页动态地更新部分内容，从而提高用户体验。尽管名称中包含 XML，但 AJAX 也可以使用 JSON、HTML 或纯文本作为数据格式。

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) {
        console.log(xhr.responseText);
    }
};
xhr.send();

发送POST请求：

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(JSON.stringify({ key: "value" }));

fetch API

发送GET请求：

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

发送POST请求：

fetch("https://api.example.com/data", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ key: "value" })
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

原生 Node.js 环境

在 Node.js 中，可以使用内置的 http 或 https 模块来发送网络请求。

发送GET请求：

const https = require('https');

https.get('https://api.example.com/data', (resp) => {
    let data = '';

    // A chunk of data has been received.
    resp.on('data', (chunk) => {
        data += chunk;
    });

    // The whole response has been received.
    resp.on('end', () => {
        console.log(JSON.parse(data));
    });

}).on("error", (err) => {
    console.log("Error: " + err.message);
});

发送POST请求：

const https = require('https');

const data = JSON.stringify({
    key: 'value'
});

const options = {
    hostname: 'api.example.com',
    port: 443,
    path: '/data',
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Content-Length': data.length
    }
};

const req = https.request(options, (res) => {
    let data = '';

    res.on('data', (chunk) => {
        data += chunk;
    });

    res.on('end', () => {
        console.log(JSON.parse(data));
    });
});

req.on('error', (e) => {
    console.error(`Problem with request: ${e.message}`);
});

req.write(data);
req.end();

使用第三方库

很多第三方库提供了对上述方法的封装，帮助我们简化代码。

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它提供了更简单的 API，并支持在浏览器中使用 XMLHttpRequest 或在 Node.js 中使用 http 模块。

此方法适用于浏览器和 Node.js。

首先安装 Axios：

npm install axios

发送GET请求：

const axios = require('axios');

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

发送POST请求：

const axios = require('axios');

axios.post('https://api.example.com/data', {
    key: 'value'
})
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

node-fetch

node-fetch 是一个轻量级的模块，它为 Node.js 提供了类似于浏览器中 fetch API 的功能。它允许你在 Node.js 环境中使用 fetch API 来发送 HTTP 请求。

此方法适用于 Node.js。

首先安装 node-fetch：

npm install node-fetch

发送GET请求：

const fetch = require('node-fetch');

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

发送POST请求：

const fetch = require('node-fetch');

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

jQuery Ajax

jQuery 是一个流行的 JavaScript 库，其中包含了简化 AJAX 调用的方法。通过 jQuery 的 $.ajax 方法，可以方便地发送各种类型的 HTTP 请求，并处理响应。

此方法适用于浏览器。

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error('Error:', error);
    }
});