前端http请求那些事

前言

在前端开发中，HTTP请求是与后端服务通信的基石，无论是加载静态资源，还是与API交互，都离不开HTTP请求。本文将深入探讨前端HTTP请求的各种技术和最佳实践，从原生API到高级库，帮助你更好地理解和掌握这一核心技能。

HTTP请求的基础

HTTP（Hypertext Transfer Protocol）是互联网上应用最为广泛的一种网络协议，用于从Web服务器传输超文本到本地浏览器的传输协议。前端开发中，我们主要关注两种类型的HTTP请求：GET和POST。
GET：用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传递参数，数据会显示在URL中，不适合传递敏感信息。
POST：用于向指定资源提交数据，请求服务器进行处理（例如提交表单或者上传文件）。数据放在请求体中，不会显示在URL中，适合传递大量或敏感信息。

原生API：XMLHttpRequest与fetch

XMLHttpRequest

XMLHttpRequest（简称XHR）是最早期的异步HTTP请求API，最初由Microsoft在Internet Explorer 5中引入，后来被W3C标准化。XHR主要用于异步获取数据，最初是为了处理XML文档而设计的，但现在它可以处理各种数据格式，包括JSON、HTML、图像等。

特点：

• 使用事件模型（如onreadystatechange）来处理请求状态变化。
• 请求和响应处理较为繁琐，需要手动监听状态变化。
• 不支持Promise，因此异步处理相对复杂，容易导致回调地狱（callback hell）。

// 使用XMR请求文本信息
function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "data.txt", true);
    xhttp.send();
}

fetch API

fetch API是现代浏览器中用于发起HTTP请求的新标准，它基于Promise，提供了一个更简洁、更一致的API来处理异步请求。fetch API不仅简化了请求和响应的处理，还提供了更强大的功能，如缓存控制、请求和响应克隆等。fetch API也是W3C的标准，旨在替代XMLHttpRequest。

特点：

• 返回Promise，使得异步请求更加容易管理和组合。
• 更简洁的API，减少了代码量。
• 支持错误处理和流式数据读取。
• 可以更方便地使用中间件模式（如请求和响应拦截器）。
• 提供了更强大的功能，如缓存控制、请求和响应克隆等。

// 使用fetch加载json数据
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

常用http请求相关高级库

Axios

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。底层封装了XMLHttpRequest和fetch等js原生api以及nodejs的http模块，提供了拦截请求和响应、处理错误信息以及取消请求等功能，转换请求和响应数据，取消请求，自动转换JSON数据，以及客户端支持防御XSRF。

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Superagent

Superagent是一个轻量级的、渐进式的HTTP请求库，支持同步和异步请求，具有链式API，易于使用。Superagent在底层使用XMLHttpRequest或fetch，但提供了更简洁的API和额外的功能，如自动JSON解析、错误处理和超时控制。

Unfetch

Unfetch是一个非常小的fetch的polyfill，旨在保持fetchAPI的兼容性，同时减小体积。Unfetch是对fetchAPI的一个实现，用于那些不支持原生fetch的浏览器环境，如旧版IE。

http请求的库还有很多，比如：XHR2，Request等，这里不一一介绍了，感兴趣的同学可以去网上查阅相关资料。

最佳实践

错误处理

无论使用哪种API或库，都需要妥善处理错误。fetch和Axios都提供了Promise，可以使用.catch()来捕获错误。

安全性

• 使用HTTPS而不是HTTP，以加密数据传输。
• 对于敏感信息，使用POST请求而非GET。
• 使用CORS（跨源资源共享）策略，确保只有授权的源可以访问你的API。

性能优化

• 使用CDN（内容分发网络）加速静态资源的加载。
• 利用缓存策略减少不必要的网络请求。
• 优化请求和响应的大小，例如压缩数据。

结语

前端HTTP请求是前端开发中的重要组成部分，理解并熟练掌握各种API和库，以及相关的最佳实践，对于构建高性能、安全的Web应用至关重要。希望本文能帮助你在前端开发的道路上更进一步。

大家有任何问题都可以在评论区留言或者私信，相互交流学习！🤓🤓🤓