Web：前端常用的几种Http请求GET和POST样例

news2024/11/16 11:39:34

1、简述

在Web开发过程中，少不了发起Http请求服务端的接口数据，在不同的框架中使用了不同的Http请求方式，常用的请求有fetch、 ajax、 axios、XMLHttpRequest、request，以下样例仅供参考。
在这里插入图片描述

2、Fetch

Fetch API 是一种 JavaScript API，是一种基于 Promise 的现代API，用于在网络中发送和接收请求。具有一下特点：

更简洁的 API：只需要一个函数就可以完成网络请求。
基于 Promise：支持更直观的异步编程。
内置 Request 和 Response 类：方便进行请求和响应的处理。
支持跨域请求：允许在不同域名之间进行数据交互。

2.1 GET

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // 处理返回的数据
  })
  .catch(error => {
    console.error(error); // 处理错误
  });

2.2 POST

const data = new FormData();
data.append('name', '张');
data.append('age', 20);
fetch('https://example.com/submit', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
}),
body: new URLSearchParams(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

3、Ajax

Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，它并不是一种技术，而是多种技术的综合体，其中包括 JavaScript、XML、JSON、DOM、CSS、HTML 以及最重要的 XMLHttpRequest 对象。通过 Ajax 可以异步从服务器请求数据并将数据更新到网页中，整个过程不需要重载（刷新）整个网页，可以将网页的内容更快的呈现给用户。

3.1 GET

$.ajax({
	url: "https://api.example.com/data",
	type: 'GET',
	dataType: 'json',
	success: function (data) {
	},
	error: function () { 
	}
});

3.2 POST

let formData = new FormData();
formData.append('id', fileId);
$.ajax({
	url:'https://example.com/submit',
	type: 'POST',
	processData: false,
	contentType: false,
	data: formData,
	dataType: 'json',
	success: function (data) {
	},
	error: function (e) {
	}
});

3.3 Done

从JQuery 1.8，$.ajax(）的 success() 被替换为 done() ，error() 被替换为 fail() ，complete() 被替换为 always() 。

$.ajax({
		type: "POST",
		url: "https://example.com/submit",
		dataType: "json",
	}).done(function(data){                         
		console.log(data)
	}).fail(function(jqXHR, textStatus, errorThrown){
		
	}).always(function( jqXHR, textStatus ){
		
	});

4、Axios

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

支持Promise API
拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。
转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
取消请求
自动转换JSON数据
客户端支持防御XSRF

4.1 引用

常用的引入axios方法：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

或者通过node npm来安装：

npm install axios

方法列举：GET、POST、PUT、PATCH、DELETE

4.2 GET

let params= {};
params.id = 1;
axios({
    method: "GET",
    url: "https://api.example.com/data",
    params:params
  }).then(res => {
    console.log(res);
  });
  
或者

axios.get("https://api.example.com/data", {
       params: params
     })
     .then(res => {
       console.log(res);
     })
     .catch(err => {
       console.log(err);
     });

4.3 POST

let formData = new FormData();
formData.append('id', fileId);
axios.post('https://example.com/submit',formData).then(res=>{
  console.log(res,'formData')
})

5、XMLHttpRequest

XMLHTTPRequest对象，顾名思义：是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。XMLHTTPRequest（XHR）对象用于与服务器交互，我们通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据，并且虽然名字叫XMLHTTPRequest，但实际上可以用于获取任何类型的数据。

5.1 GET

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.send(); 
xhr.onreadystatechange = function(){
　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
　　　　　　alert( xhr.responseText );
　　　　} else {
　　　　　　alert( xhr.statusText );
　　　　}
};

5.2 POST

var xhr = new XMLHttpRequest();
xhr.open('post', 'https://example.com/submit', true);
xhr.responseType = "blob";
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.onload = function () {
	if (xhr.status == 200) {
		var blob = new Blob([xhr.response], {
			type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream;charset=utf-8"'
		})
		var reader = new FileReader();
		reader.onload = function () {
			console.log(this.result);
		};
		reader.readAsArrayBuffer(blob);
	}
};
xhr.send();

6、Request

Node.js是一个基于Chrome V8 JavaScript引擎的开源、跨平台的Javascript运行环境，使JavaScript可以脱离浏览器运行。它提供了很多强大的模块，使Web开发更轻松。其中，request模块是一个使用最广泛的HTTP模块，可以用来发送HTTP/HTTPS请求。

添加request模块：

npm install request

6.1 GET

var request = require('request');
request.get('https://api.example.com/data', function(error, response, body) {
  console.log(body);
});

6.2 POST

var request = require('request');
request.post('https://example.com/submit', {form:{key:'value'}}, function(error, response, body) {
  //上传文件或者其他操作
});