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

青旅半醒 2024-04-20 12:11 48阅读 0赞

#### 1、简述 ####

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

#### 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 #####

##### 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方法：

或者通过node npm来安装：

npm install axios

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

##### 4.2 GET #####

##### 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 #####

##### 5.2 POST #####

#### 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) {
        
      //上传文件或者其他操作
    });

[c27f00279c864464a6d05b5b2469c9dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5689ad0d8555450aac67c6566692c9db.png