原生 JavaScript 发送请求

王梦旭707

已于 2024-02-04 13:57:54 修改

阅读量796

点赞数 15

文章标签： javascript 开发语言 ecmascript

于 2024-02-04 13:35:30 首次发布

本文链接：https://blog.csdn.net/weixin_67724481/article/details/136023167

版权

要使用原生 JavaScript 发送一个 POST 请求，你可以使用 XMLHttpRequest 或 fetch API。

`fetch` API

介绍

Fetch API是现代浏览器提供的用于处理网络请求的强大工具。它提供了一种简单、灵活和强大的方式来获取数据，而无需依赖旧的XMLHttpRequest

基本使用方法

Fetch API接受一个URL作为请求的地址，并返回一个Promise对象。你可以使用.then()方法处理响应，并使用.catch()方法处理错误

参数

URL：发送网络请求的地址。
配置对象：包含以下字段：

method：请求方法，默认为GET。
headers：请求的头部信息，接受一个对象。
body：请求的参数，可以是字符串、FormData、Blob或BufferSource等类型。当为GET请求时，参数拼在URL上。
credentials：cookie设置，默认omit，忽略不带cookie；same-origin同源请求带cookie；include无论跨域还是同源都会带cookie。
mode：指定请求模式，默认值为cors，允许跨域；same-origin只允许同源请求；no-cors只限于get、post和head，并且只能使用有限的几个简单标头。
cache：用户指定缓存策略。
keepalive：用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。

相应结果

Fetch API返回一个Promise对象，它将在请求成功时解析为Response对象。你可以使用Response对象的.json()、.text()等方法来解析响应数据。

错误处理

Fetch API返回的Promise在发生错误时会被拒绝，你可以使用.catch()方法捕获并处理错误。在上面的示例中，我们使用.catch()方法打印出错误信息。

取消请求

如果你需要在某个时刻取消Fetch请求，可以使用Response对象的.cancel()方法。这将导致Promise被拒绝，并返回一个取消状态码。请注意，取消请求可能不会立即停止服务器上的处理过程。

异步操作

Fetch API返回的Promise是异步的，这意味着你不能直接从Promise中获取结果。你需要使用.then()方法来处理异步操作的结果或使用async/await语法来简化异步代码的编写。例如：

async function fetchData() {  
  try {  
    const response = await fetch('/abc'); // 等待fetch完成并返回结果  
    const data = await response.json(); // 等待解析响应数据并返回结果  
    console.log(data); // 打印解析后的数据  
  } catch (error) {  
    console.error('Error:', error); // 捕获并打印错误信息  
  }  
}

例1(携带参数为json时)：

fetch('https://......', {  
  method: 'POST', // 或者 'GET'  
  headers: { 
    'Content-Type': 'application/json' //携带参数为json
  },  
  body: JSON.stringify({id:0}) // post请求携带的参数  
  // params:{id:0} // get请求携带的参数  
})  
.then(response => response.json()) // 将响应转换为 JSON  
.then(data => console.log(data)) // 打印响应数据  
.catch((error) => {  
  console.error('Error:', error);  
});

例2(携带参数为表单编码的数据时)：

const formData = new FormData();  
formData.append('param1', 'value1');  
formData.append('param2', 'value2');  
formData.append('param3', 'value3');  
  
fetch('https://api.example.com/data', {  
  method: 'POST',  
  headers: {  
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',  //表单编码
  },  
  body: formData,  
})  
.then(response => response.json())  
.then(data => console.log(data))  
.catch((error) => {  
  console.error('Error:', error);  
});

append方法用于向FormData对象中添加数据。它接受两个参数：

name（字符串）：数据的键名（name）。
value（字符串或Blob）：要添加的值。

XMLHttpRequest

//1.创建一个XMLHttpRequest对象：
var xhr = new XMLHttpRequest();
//2.配置请求参数：
xhr.open('POST', 'https://.....', true);//这里的第一个参数是请求方法（这里是POST），第二个参数是请求的URL，第三个参数指定请求是否异步处理（true表示异步处理）。
//3.设置请求头：
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
//如果要使用json，可以用application/json'
//4.发送请求：
xhr.send('id=0&name="www"');//这里将参数'id=0'作为POST数据发送给服务器。
//如何要传递json对象，xhr.sendJSON.stringify({param1: 'value1',param2: 'value2'});
//5.监听响应：
xhr.onload = function() {  
  if (xhr.status === 200) { // 200表示请求成功  
    var data = xhr.responseText; // 获取响应数据 
    //var data = JSON.parse(xhr.responseText); // 将响应的JSON字符串转换为JavaScript对象  
    console.log(data); // 打印响应数据  
  } else {  
    console.error('请求失败，状态码：' + xhr.status);  
  }  
};
//这里通过onload事件监听响应，并根据响应状态码判断请求是否成功。如果成功，你可以获取响应数据并进行处理。如果失败，可以在控制台打印错误信息。