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

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