首页 > 编程语言 >node和浏览器发送请求的方式

node和浏览器发送请求的方式

时间:2024-03-08 11:26:36浏览次数:28  
标签:node 浏览器 请求 http 发送 xhr error console data

浏览器请求接口运行在客户端的浏览器环境中,而Node请求接口运行在服务器端的Node.js环境中。

浏览器提供了特定的API(如Fetch APIXMLHttpRequest)来发送HTTP请求

fetch:

Fetch API 是一种现代、基于 Promise 的 JavaScript API,用于在浏览器环境中执行网络请求

fetch(url, {  
  method: 'POST', // or 'PUT'  
  headers: {  
    'Content-Type': 'application/json',  
  },  
  body: JSON.stringify(data),  
})  
.then(response => {  
   // 检查响应状态码是否为 200-299  
   if (!response.ok) {  
     throw new Error('Network response was not ok.');  
   }  
   // 解析 JSON 响应体  
   return response.json();  
}) 
.then(data => console.log(data))  
.catch((error) => console.error('Error:', error));

XMLHttpRequest

XMLHttpRequest 提供了丰富的功能,但它的 API 相对复杂,并且错误处理不如 fetch API 直观。因此,在现代 Web 开发中,如果可能的话,建议使用 fetch API。然而,在某些情况下,比如需要更精细地控制请求(例如上传进度、中止请求等),XMLHttpRequest 仍然是一个有用的工具。

var xhr = new XMLHttpRequest();  
xhr.open('POST', 'https://api.example.com/data', true);  
  
// 设置请求头,如果是发送 JSON 数据的话  
xhr.setRequestHeader('Content-Type', 'application/json');  
  
var data = JSON.stringify({ key1: 'value1', key2: 'value2' });  
  
xhr.onload = function () {  
  if (xhr.status === 200) {  
    console.log(xhr.responseText);  
  } else {  
    console.error('Request failed.  Returned status of ' + xhr.status);  
  }  
};  
  
// 发送请求体  
xhr.send(data);

处理请求进度XMLHttpRequest 还提供了处理请求进度事件的功能:

var xhr = new XMLHttpRequest();  
xhr.open('GET', 'https://api.example.com/large-data', true);  
  
xhr.onprogress = function (event) {  
  if (event.lengthComputable) {  
    var percentComplete = (event.loaded / event.total) * 100;  
    console.log(percentComplete + '% 下载完成');  
  }  
};  
  
xhr.onload = function () {  
  if (xhr.status === 200) {  
    console.log(xhr.responseText);  
  } else {  
    console.error('请求失败,状态码:' + xhr.status);  
  }  
};  
  
xhr.send();

Node.js则使用不同的API和工具来发送请求,如http/https模块

http:

在Node.js中,httphttps模块是用于创建HTTP和HTTPS服务器以及发送HTTP和HTTPS请求的。这两个模块提供了底层的HTTP功能,允许你构建基于HTTP协议的客户端和服务器应用。

发送HTTP请求(作为客户端)

const http = require('http');  
  
const options = {  
  hostname: 'www.example.com',  
  port: 80,  
  path: '/todo/api/v1.0/tasks',  
  method: 'GET'  
};  
  
const req = http.request(options, (res) => {  
  let data = '';  
  
  // 当有数据块到来时,追加到data变量  
  res.on('data', (chunk) => {  
    data += chunk;  
  });  
  
  // 当响应完成时,处理数据  
  res.on('end', () => {  
    console.log(JSON.parse(data));  
  });  
});  
  
req.on('error', (error) => {  
  console.error(`问题:${error.message}`);  
});  
  
// 发送请求  
req.end();

创建HTTP服务器

const http = require('http');  
  
const server = http.createServer((req, res) => {  
  res.writeHead(200, {'Content-Type': 'text/plain'});  
  res.end('Hello World\n');  
});  
  
server.listen(8124, () => {  
  console.log('Server running at http://127.0.0.1:8124/');  
});

 

标签:node,浏览器,请求,http,发送,xhr,error,console,data
From: https://www.cnblogs.com/wangxirui/p/18060551

相关文章

  • 浏览器和服务器之前的加密解密过程
    当服务器通过HTTPS发送加密数据时,浏览器会进行以下步骤来解密这些数据:建立HTTPS连接:用户在浏览器中输入HTTPS网址,浏览器会尝试与服务器建立连接。这个连接是通过HTTPS协议进行的,它使用SSL/TLS加密技术来确保数据的安全性。交换密钥和证书:在建立连接的过程中,服务器会向浏......
  • 对于core-js相关的报错 core-js/modules/es.array.push.js in ./node_modules/.store
    Thesedependencieswerenotfound:*core-js/modules/es.array.push.jsin./node_modules/.store/@[email protected]/node_modules/@babel/runtime/helpers/construct.js,./node_modules/.store/@[email protected]/node_modules/@babel/runtime/helpers/esm/obj......
  • window环境 node 多版本切换
    1. 不同版本node安装在不同目录2.配置环境变量鼠标右击【此电脑】→点击【属性】→点击【高级系统设置】→点击【环境变量】修改系统变量path,修改相应版本的node路径 点击确定。在cmd窗口输入 node-v ,显示新切换的node版本号 ......
  • 如何使文件直接在浏览器中预览或下载
     如何使文件直接在浏览器中预览,而不是下载?首先请正确配置Content-Type头部,并且文件的Content-Disposition头部的参数值设置为inline(表示浏览器应该尝试打开内容),当浏览器支持打开当前文件的格式时,浏览器会直接打开该文件,而不是直接下载。如何使文件直接在浏览器中下载,......
  • php发送curl请求
    收藏地址https://blog.csdn.net/lmp5023/article/details/102585153get请求//初始化$curl=curl_init();//设置抓取的urlcurl_setopt($curl,CURLOPT_URL,'http://www.baidu.com');//设置头文件的信息作为数据流输出curl_setopt($curl,CURLOPT_HEADER,1);//设......
  • 数据盘故障导致journalnode异常恢复
    背景环境:hdp2.6.6部署的小集群(4节点),这个投入生产后,转手了很多批次人维护,安装源介质这些通通都找不到了,目前官网无法下载hdp的安装介质,中途有坏了一个节点的系统盘,维修好了后,因为没有安装介质,一直都没有恢复。集群部署了4个jn,昨天一个节点的data1故障,导致namenode异常无法启动和ha......
  • Blender Shader Node简单记录
    不知道为什么之前找到的某个教程已经消失了,干脆自己总结算了(生气)以下所有内容均由自己辅助着官网手册进行总结。很是头大啊......基本前提Blender内用以下颜色对应坐标轴:颜色坐标轴红色X轴绿色Y轴蓝色Z轴就和一般uv颜色一样,所有负数区域都是黑色的,毕竟......
  • 网页浏览器Chrome开发者调试工具-Application(应用程序)
    前言全局说明网页浏览器Chrome开发者调试工具-Application(应用程序)一、网页浏览器Chrome开发者调试工具-Application(应用程序)Application:应用面板,用于记录网站加载的所有资源信息,如存储、缓存、字体、图片等,同时也可以对一些资源进行修改和删除。二、关闭标签页......
  • 网页浏览器Chrome开发者调试工具-Network(网络)
    前言全局说明网页浏览器Chrome开发者调试工具-Network(网络)一、网页浏览器Chrome开发者调试工具-Network(网络)网络标签页是对网页请求过程的监视,这里可以看到网页链接发送了什么请求,接收到了什么内容。都可以直观的看到二、关闭标签页在标签页上右键,可以选择移除或移......
  • 网页浏览器Chrome开发者调试工具-Performance(性能)
    前言全局说明网页浏览器Chrome开发者调试工具-Performance(性能)一、网页浏览器Chrome开发者调试工具-Performance(性能)用于记录和分析页面在运行时的所有活动,比如CPU占用情况、呈现页面的性能分析二、关闭标签页在标签页上右键,可以选择移除或移动到快速视图栏免责......