发起HTTP请求的几种方式

通往自由之路2023-11-07 15:44

为了更好的理解HTTP协议先来了解一下IP和TCP协议。

  1. IP（Internet Protocol）协议和TCP（Transmission Control Protocol）协议是互联网的基础协议，它们位于网络协议栈的较低层次，主要负责数据包的发送和接收。

  2. IP协议是网络层的协议，主要负责将数据包发送到正确的设备。每个连接到互联网的设备都有一个唯一的IP地址，IP协议就是通过这个地址将数据包发送到正确的设备。

  3. TCP协议是传输层的协议，主要负责在两个设备之间建立可靠的连接，并保证数据包的顺序和完整性。TCP协议会对数据包进行编号，确保接收端能够按照正确的顺序接收数据包，如果有数据包丢失，TCP协议还会要求发送端重新发送。

HTTP（HyperText Transfer Protocol）协议则位于应用层，它是建立在TCP协议之上的。HTTP协议定义了客户端和服务器之间如何进行数据交换，例如请求的格式、响应的格式等。当在浏览器中输入一个网址时，浏览器就会通过HTTP协议向服务器发送请求，并接收服务器的响应。

所以，HTTP协议依赖于TCP协议来传输数据，而TCP协议又依赖于IP协议来将数据包发送到正确的设备。

笔者属于前端开发，接下来的一段时间要总结在前端开发领域处于战略地位的知识点。HTTP请求就属于前端战略知识点之一。

本文来总结下发起HTTP的几种方式。

使用 XMLHttpRequest

XMLHttpRequest是比较底层也比较早期的发起http请求的方式，XMLHttpRequest不是基于Promise的所以往往在使用XMLHttpRequest时需要手动封装为Promise形式。

js 复制代码 
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的封装

js 复制代码 
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设计。主要特点

  1. 基于Promise：返回的Promise对象，可以使用then方法进行链式调用，使得异步代码更易于管理。

  2. 灵活性：Fetch可以自定义请求的各种设置，如请求方法（GET、POST等）、请求头、请求体等。

  3. 支持跨域请求：Fetch支持CORS（跨源资源共享），可以进行跨域请求。

  4. 支持流处理：Fetch支持流处理，可以在数据完全接收到之前就开始处理数据。

基本使用

javascript 复制代码 
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等。

主要特点包括

  1. 支持多协议：如上所述，cURL 支持非常多的协议，可以满足各种网络请求的需求。

  2. 支持数据上传和下载：cURL 可以用于文件的上传和下载，非常适合进行批量操作。

  3. 支持 SSL 证书：cURL 支持 SSL 证书，可以进行安全的网络请求。

  4. 支持代理：cURL 支持通过代理服务器进行网络请求。

  5. 支持用户认证：cURL 支持各种用户认证方式，如基本认证、摘要认证、NTLM 认证等。

使用 cURL 发起一个 GET 请求

bash 复制代码 
curl https://api.example.com/data

后端与后端之间

后端与后端之间也可以发起请求。这里java的HttpClient来发起HTTP的get请求

java 复制代码 
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配置示例，用于解决跨域问题

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请求

javascript 复制代码 
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库

java 复制代码 
// 创建 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的例子

javascript 复制代码 
// 创建 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);
};

总结

现代社会有这样一句话：人与人之间最大差异是认知。做什么事，都要重视处于核心或者处于战略地位的知识点或者环节。

上面总结了几种发起HTTP请求的方式。笔者认为相较学习几种发起HTTP请求的方式，真正认识到HTTP在开发中的重要性才是重要的。

（本文完）

相关推荐
唐 城3 小时前
curl 放弃对 Hyper Rust HTTP 后端的支持
开发语言·http·rust
DevilHeart灬4 小时前
使用Grafana中按钮插件实现收发HTTP请求
http·grafana
总是学不会.8 小时前
第五篇：前后端如何“扯皮”——HTTP 在开发中的应用
java·网络·网络协议·http·开发
火狮9 小时前
鸿蒙Next API 12开发，使用@ohos/axios进行HTTP请求
http·华为·harmonyos
m0_748238279 小时前
WebClient HTTP 请求问题处理模板（泛型响应、忽略 SSL 证书等）
网络协议·http·ssl
我曾经是个程序员9 小时前
鸿蒙学习记录之http网络请求
服务器·学习·http
gywl1 天前
openEuler VM虚拟机操作（期末考试）
linux·服务器·网络·windows·http·centos
某柚啊1 天前
Windows开启IIS后依然出现http error 503.the service is unavailable
windows·http
_oP_i1 天前
HTTP 请求Media typetext/plain application/json text/json区别
网络协议·http·json
yang_shengy1 天前
【JavaEE】网络（6）
服务器·网络·http·https
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明0719个Web前端交互式3D JavaScript框架和库08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO