首页 > 网络编程 > JavaScript > javascript技巧 > JS发起HTTP请求

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

2023-11-07 16:39:44 作者：通往自由之路

这篇文章主要为大家详细介绍了JavaScript发起HTTP请求的多种方式,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起学习一下

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

IP（Internet Protocol）协议和TCP（Transmission Control Protocol）协议是互联网的基础协议，它们位于网络协议栈的较低层次，主要负责数据包的发送和接收。
IP协议是网络层的协议，主要负责将数据包发送到正确的设备。每个连接到互联网的设备都有一个唯一的IP地址，IP协议就是通过这个地址将数据包发送到正确的设备。
TCP协议是传输层的协议，主要负责在两个设备之间建立可靠的连接，并保证数据包的顺序和完整性。TCP协议会对数据包进行编号，确保接收端能够按照正确的顺序接收数据包，如果有数据包丢失，TCP协议还会要求发送端重新发送。

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

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

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

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

使用 XMLHttpRequest

XMLHttpRequest是比较底层也比较早期的发起http请求的方式，XMLHttpRequest不是基于Promise的所以往往在使用XMLHttpRequest时需要手动封装为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的封装

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：返回的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 可以用于文件的上传和下载，非常适合进行批量操作。
支持 SSL 证书：cURL 支持 SSL 证书，可以进行安全的网络请求。
支持代理：cURL 支持通过代理服务器进行网络请求。
支持用户认证：cURL 支持各种用户认证方式，如基本认证、摘要认证、NTLM 认证等。

使用 cURL 发起一个 GET 请求

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

后端与后端之间

后端与后端之间也可以发起请求。这里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请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！