当前位置：首页 > 全部内容 > JS发起HTTP请求的多种方式总结

JS发起HTTP请求的多种方式总结

作者：资源驿站时间：2026-10-31 07:54:13浏览：342

本文系统梳理了前端开发中发起HTTP请求的多种技术手段，涵盖从底层XMLHttpRequest到现代Fetch API，以及封装库axios的使用。同时介绍了通过HTML标签、cURL命令行工具、后端HttpClient、Nginx代理、小程序wx.request及Android OkHttp等场景下的请求发起方式，并简要辨析了WebSocket与HTTP的区别，为开发者提供全面的网络请求方案参考。

为了深入理解HTTP协议，首先需要掌握IP协议与TCP协议的基础知识。

  • IP（Internet Protocol，网际协议）和TCP（Transmission Control Protocol，传输控制协议）构成了互联网通信的基础，它们处于网络协议栈的低层，核心职责是负责数据包的发送与接收。
  • IP协议归属于网络层，其核心功能是将数据包路由至正确的目标设备。互联网中每台设备都拥有唯一的IP地址，IP协议正是依据该地址实现数据包的精准投递。
  • TCP协议属于传输层，旨在两台设备间建立可靠的连接，并确保数据包传输的顺序性与完整性。TCP会对数据包进行编号，使接收端能按序重组数据；若发生丢包，TCP机制会触发重传。

HTTP（HyperText Transfer Protocol，超文本传输协议）位于应用层，构建于TCP协议之上。它规范了客户端与服务器间的数据交换格式，包括请求与响应的结构。当用户在浏览器输入网址时，浏览器即通过HTTP协议向服务器发起请求并接收响应。

综上所述，HTTP协议的运行依赖于TCP协议进行数据传输，而TCP协议又依赖于IP协议将数据包送达正确的目标设备。

作为前端开发人员，接下来的一段时间我将总结前端领域具有战略意义的关键知识点。发起HTTP请求便是其中重要的战略知识点之一。

本文旨在总结发起HTTP请求的几种主要方式。

使用 XMLHttpRequest

XMLHttpRequest是一种底层且早期的HTTP请求发起方式。由于它不基于Promise，因此在使用时通常需要手动将其封装为Promise形式以便更好地处理异步逻辑。

export const ajax = function (config) {
    return new Promise((resolve, reject) => {
      // 2. 发起XHR请求，默认请求方法为GET
      const xhr = new XMLHttpRequest()
      xhr.open(config.method || 'GET', config.url)
      xhr.setRequestHeader('Authorization', '2f3e1153a4ef0cc3a96fde17509a8a4b8cd428c5fbf0bf60e7133a1d3ca5a571');
      xhr.setRequestHeader('Content-Type','application/json')

      xhr.responseType = 'blob';   
      xhr.addEventListener('loadend', () => {
        // 3. 调用成功/失败的处理程序
        if (xhr.status >= 200 && xhr.status < 300) {
            resolve(xhr.response)
        //   typeof xhr.response === 'string' ? resolve(JSON.parse(xhr.response)) : resolve(xhr.response)
        } else {
          reject(new Error(xhr.response))
        }
      })
      xhr.send(JSON.stringify(config.data))
    })
  }

使用axios

axios本质上是对XMLHttpRequest的封装，提供了更简洁的API接口。

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: {
    key: 'value'
  },
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

使用Fetch

Fetch是现代网络请求接口，提供了一种跨网络异步获取资源的方式。Fetch的设计基于Promise，其主要特点如下：

  • 基于Promise：Fetch返回Promise对象，支持通过then方法进行链式调用，使异步代码的管理更加便捷。
  • 灵活性：Fetch允许自定义请求的多种设置，包括请求方法（如GET、POST等）、请求头以及请求体等。
  • 支持跨域请求：Fetch原生支持CORS（跨源资源共享），允许进行跨域请求操作。
  • 支持流处理：Fetch支持流式数据处理，允许在数据完全接收完毕前就开始处理部分数据。

基本使用

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

浏览器发起

浏览器作为Web客户端，其本身即是遵循HTTP协议的设备。既然浏览器通过HTTP协议与服务器交互，那么它自然具备发起HTTP请求的功能。

除了XMLHttpRequest和Fetch，浏览器还可通过地址栏输入或HTML相关标签发起HTTP请求。

HTML中的img、script、link、a、video、audio等标签，可通过src或href属性发起HTTP请求，但这些方式仅支持GET请求。

此外，HTML的form标签可以发起GET和POST请求。

使用cURL

cURL是一个命令行工具，允许通过多种协议向服务器发送请求并接收响应。它支持丰富的协议，包括HTTP、HTTPS、FTP、FTPS、SFTP、SCP、LDAP、LDAPS、SMTP、POP3、IMAP、RTSP、RTMP、TELNET、TFTP等。

cURL的主要特点包括：

  • 支持多协议：如上所述，cURL支持众多协议，能够满足各种网络请求需求。
  • 支持数据上传和下载：cURL可用于文件的上传和下载，非常适合批量操作场景。
  • 支持SSL证书：cURL支持SSL证书，可进行安全的网络请求。
  • 支持代理：cURL支持通过代理服务器进行网络请求。
  • 支持用户认证：cURL支持多种用户认证方式，如基本认证、摘要认证、NTLM认证等。

使用cURL发起一个GET请求

curl https://api.example.com/data

后端与后端之间

后端服务之间也可以发起HTTP请求。这里以Java的HttpClient为例发起HTTP GET请求。

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
                .uri(new URI("http://example.com"))
                .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());

        System.out.println(response.body());
    }
}

上述代码首先创建了一个HttpClient对象，然后创建一个HttpRequest对象并指定请求URL。接着使用HttpClient的send方法发送请求，并获取HttpResponse对象。

nginx中转

Nginx是知名的HTTP请求中间件。虽然它不能直接发起HTTP请求，但可作为代理服务器将请求进行转发。

一个简单的Nginx配置示例，用于解决跨域问题

server {
    listen 80;
    server_name localhost;

    location /api/ {
        proxy_pass http://backend_server; # 这里是实际服务器的地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

上述配置设置了一个反向代理，将所有以 /api/ 开头的请求转发给 http://backend_server。这样，前端可以通过访问 http://localhost/api/ 进行数据交互，从而避免跨域问题。

小程序发起

微信小程序提供了wx.request来发起HTTP请求。

wx.request({
  url: 'https://api.example.com/data', // 请求的 URL
  method: 'GET', // 请求方法
  data: { // 请求参数
    key: 'value'
  },
  header: { // 设置请求的 header
    'content-type': 'application/json'
  },
  success(res) { // 请求成功的回调函数
    console.log(res.data)
  },
  fail(err) { // 请求失败的回调函数
    console.error(err)
  }
})

需要注意的是，由于微信小程序的安全策略，开发者必须在微信公众平台配置服务器域名，只有配置过的域名才能被微信小程序请求。此外，微信小程序不支持跨域请求，也不支持使用Cookie。

android发起

在Android开发中，可以使用多种方式发起HTTP请求，其中最常用的是使用OkHttp库。

// 创建 OkHttpClient
OkHttpClient client = new OkHttpClient();

// 创建 Request
Request request = new Request.Builder()
      .url("http://example.com")
      .build();

// 使用 OkHttpClient 发起请求
client.newCall(request).enqueue(new Callback() {
    @Override
    public void onFailure(Call call, IOException e) {
        e.printStackTrace();
    }

    @Override
    public void onResponse(Call call, Response response) throws IOException {
        if (response.isSuccessful()) {
            final String myResponse = response.body().string();

            MainActivity.this.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    // 在这里更新 UI
                    textView.setText(myResponse);
                }
            });
        }
    }
});

需要注意的是，网络请求是在后台线程中进行的，因此不能直接在回调函数中更新UI。需要使用 runOnUiThread 方法在主线程中更新UI。

此外，由于Android不允许在主线程中进行网络请求，所以这段代码需要在后台线程中运行。

Websocket

WebSocket的握手过程使用HTTP协议，但一旦握手成功，服务器与客户端之间的交互完全依赖于WebSocket协议。因此，严格来说WebSocket不算作HTTP请求。

WebSocket协议支持全双工通信，即服务器和客户端可以同时发送和接收信息；而HTTP协议是半双工的，即任一时刻要么是请求要么是响应，不能同时进行。

一个简单的在浏览器中使用WebSocket的例子

// 创建 WebSocket 连接
var socket = new WebSocket('ws://localhost:8080');

// 连接打开时触发
socket.onopen = function(event) {
  console.log('WebSocket is connected.');

  // 发送一个初始化消息
  socket.send('Hello, Server!');
};

// 接收到消息时触发
socket.onmessage = function(event) {
  console.log('Received: ' + event.data);

  // 关闭连接
  socket.close();
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('WebSocket is closed.');
};

// 连接发生错误时触发
socket.onerror = function(error) {
  console.log('WebSocket Error: ' + error);
};

到此这篇关于JS发起HTTP请求的多种方式总结的文章就介绍到这了，更多相关JS发起HTTP请求内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数

2026-11-03 22:41:12

怎么使用命令行批量格式化项目中的JS文件

2026-11-03 19:04:42

JS代码美化后报错怎么办？常见格式化冲突解决方法

2026-11-03 18:47:01

不用moment.js，怎么用原生JS Intl API格式化时间戳

2026-11-03 18:10:30

原生JS与dayjs获取当前日期的代码对比

2026-11-03 17:57:26