WEB：前端常用 HTTP 请求插件的详细指南

拾荒的小海螺

已于 2024-07-02 16:49:02 修改

阅读量1.2k

点赞数 1

分类专栏： WEB 文章标签：前端 http 网络协议

于 2023-10-07 22:28:41 首次发布

本文链接：https://blog.csdn.net/lishangke/article/details/133384530

版权

WEB 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、简述

在现代 Web 开发中，与服务器进行 HTTP 请求是必不可少的一部分。为了简化这一过程，许多开发者使用各种 HTTP 请求插件。这些插件不仅让发送请求变得更加方便，还提供了许多高级功能，例如请求拦截、错误处理和取消请求等。本文将介绍几种流行的前端 HTTP 请求插件，并通过详细示例展示它们的用法。
在这里插入图片描述

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

7、SuperAgent

SuperAgent 是一个轻量级、灵活的 HTTP 客户端库，支持链式调用和文件上传。

添加 SuperAgent 模块：

npm install superagent

以下是 SuperAgent 请求的样例：

const superagent = require('superagent');

// 发送 GET 请求
superagent.get('/user?ID=12345')
  .end((err, res) => {
    if (err) {
      console.error(err);
    } else {
      console.log(res.body);
    }
  });

// 发送 POST 请求
superagent.post('/user')
  .send({ firstName: 'Fred', lastName: 'Flintstone' })
  .end((err, res) => {
    if (err) {
      console.error(err);
    } else {
      console.log(res.body);
    }
  });

8、Got

Got 是一个用于 Node.js 的简单且强大的 HTTP 请求库，具有高度可定制性和内置重试机制。

添加 Got 模块：

npm install got

以下是 Got 请求的样例：

const got = require('got');

// 发送 GET 请求
got('https://api.example.com/user?ID=12345')
  .then(response => {
    console.log(response.body);
  })
  .catch(error => {
    console.error(error.response.body);
  });

// 发送 POST 请求
got.post('https://api.example.com/user', {
  json: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  responseType: 'json'
})
  .then(response => {
    console.log(response.body);
  })
  .catch(error => {
    console.error(error.response.body);
  });

9、Vue Resource

Vue Resource 是 Vue.js 之前官方推荐的 HTTP 插件，主要用于 Vue.js 项目中发送 HTTP 请求，现在多使用 Axios 代替。

添加 Vue Resource 模块：

npm install vue-resource

以下是 Vue Resource 请求的样例：

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

new Vue({
  el: '#app',
  created() {
    // 发送 GET 请求
    this.$http.get('/user?ID=12345').then(response => {
      console.log(response.body);
    }, response => {
      console.error(response);
    });

    // 发送 POST 请求
    this.$http.post('/user', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    }).then(response => {
      console.log(response.body);
    }, response => {
      console.error(response);
    });
  }
});

10、总结

选择哪种 HTTP 请求插件取决于你的项目需求和个人偏好。Axios 以其强大的功能和简单的 API 在开发者中广受欢迎；Fetch API 是浏览器内置的方案，语法简洁，但需要处理一些低级问题；jQuery Ajax 简单易用，适用于已经使用 jQuery 的项目；SuperAgent 和 Got 提供了高级功能和灵活性，适合需要更多自定义选项的项目；Vue Resource 则专门为 Vue.js 项目设计。

希望这篇指南能帮助你更好地理解和选择适合你项目的 HTTP 请求插件。如果你有任何问题或建议