FlyHttp 的诞生:从认识各种网络请求开始

发布于:2024-11-29 ⋅ 阅读:(30) ⋅ 点赞:(0)

一. 前言

首先介绍一下,FlyHttp 是一个自动生成前端代码 service 层的工具,目的就是要解放你的双手,化繁为简,可降低代码量 99%

在开发前端项目时,尤其是目前绝大多数的项目都是前后端分离式开发的形式,因此我们经常需要对接后端接口,进行前后端交互。而基于这些,就出现了琳琅满目的前端请求框架!

从最初的 XMLHttpRequestajaxFetch API ,再到 axios,各种各样的搭配不同框架的网络请求库应运而生,它们服务于不同的前端框架,进行优秀的前后端数据交互,给我们前端开发者提供了便利性。

虽然很方便,但是我却不满足,因为不喜欢折腾的程序员不是好将军,写代码时,还是时常问一下自己,是否还能再方便些?

因为网络请求通常就是最常用的 GET PUT POST DELETE PATCH 这几种,而且大多数中声明的请求方法都是重复的,是有据可循的,因此我想从这方面着手,能否优化请求流程,解放双手,进一步为开发提供便利性!

CTRL + CV 的开发模式,我们一定要摒弃

本文介绍的工具库是 Flyit 工具库中的 http 模块 FlyHttp,核心目的就是要省略某些重复的代码,部分配置化实现极致开发体验!

 

二. 认识网络请求

2.1 前端开发模式

在前端开发中,网络请求库通常与不同的前端框架中搭配使用,目前前端开发形式可能包括但不限于以下几种形式,我简单总结了以下几种:

  1. jQueryjQuery 是早期 JavaScript 框架中的王者,其中提供了方便的 AJAX 方法来发送网络请求。

  2. VueVue.js 可以说是在国内前端框架的佼佼者,提供了 axios 的插件来处理网络请求。

  3. ReactReact 是另一款热门的前端框架,它本身并没有集成网络请求的功能,所以通常也会搭配像 axios 或者 Fetch API 这样的库来进行网络请求。

  4. uni-appuni-app 是一个基于 Vue.js 的跨平台应用开发框架,在 uni-app 中,可以使用封装了网络请求功能的 uni.request API 来进行网络请求。

  5. 原生 JavaScript:通过原生的 XMLHttpRequest 对象或者 Fetch API 来发起网络请求。

2.2 网络请求库

我们可以从以上这些常用的前端框架中总结出来,主流的前端请求库主要包括以下几种:

  1. axios:基于 Promise 的 HTTP 客户端,可以在浏览器和 Node.js 中使用。具有简洁的 API、易用的请求拦截和响应拦截、自动处理请求和响应数据等特点,被广泛应用于前端项目中。

  2. fetch:现代浏览器原生支持的 API,用于替代传统的 XMLHttpRequest 对象。

  3. jQuery:尽管 jQuery 已经逐渐被更现代的框架替代,主要是对于一些传统项目仍然在继续使用。

  4. 原生 XMLHttpRequest:传统原生的的 XMLHttpRequest 对象,基本不会在代码中使用,仅做了解即可。

因此本文也会以这些请求库为基准,同时也回顾下在实际开发中,这些请求库的常规使用思路!

2.3 请求示例

以以上介绍的请求库为准,接下来我们来看一下在实际开发中,这些网络请求库是如何进行使用的!

2.3.1 使用原生 XMLHttpRequest

XMLHttpRequest 是实现 AjaxAsynchronous JavaScript and XML)技术的基础,它是原生的 JavaScript,可以在任何支持 JavaScript 的环境中使用。在早期的前端开发中,XMLHttpRequest 是发起异步请求是常见的做法。

以下是使用原生的 XMLHttpRequest 的方式来发起网络请求:

// 简单封装一下
function httpRequest(url, method, callback) {
  var xhr = new XMLHttpRequest()
  xhr.open(method, url, true)
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        callback(null, xhr.responseText)
      } else {
        callback('error:' + xhr.statusText, null)
      }
    }
  }
  xhr.send()
}

// 使用方式
httpRequest('https://api.example.com/data', 'GET', function (error, response) {
  if (error) {
    console.error(error)
  } else {
    console.log(JSON.parse(response))
  }
})
2.3.2 使用 jQuery 的 ajax

jQueryajax 方法主要在 jQuery 库中使用。在早期的前端开发中,jQuery 是非常流行的前端库,其提供的 ajax 方法简化了通过 XMLHttpRequest 发起异步请求的操作。

以下是使用 jQueryajax 的方式来发起网络请求:

jQuery.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  dataType: 'json',
  success: function (data) {
    console.log(data)
  },
  error: function (xhr, status, error) {
    console.error('error:', error)
  }
})
2.3.3 使用 Fetch API

Fetch API 是一种现代的 Web API,用于网络请求和响应。它提供了一种更强大和灵活的方式来处理网络请求,取代了传统的 XMLHttpRequestFetch API 广泛应用于现代的前端开发中,特别是在基于 JavaScript 的前端框架和库中。

以下是使用 Fetch API 的方式来发起网络请求:

fetch('https://api.example.com/data')
  .then(function (response) {
    if (response.ok) {
      return response.json()
    } else {
      throw new Error('error:' + response.statusText)
    }
  })
  .then(function (data) {
    console.log(data)
  })
  .catch(function (error) {
    console.error(error)
  })
2.3.4 使用 axios

axios 是一个独立的 HTTP 客户端库,可以与任何前端框架或库结合使用。由于他提供了简洁易用的 API,支持 Promise,以及在浏览器和 Node.js 环境中均可使用,因此在许多前端项目中被广泛应用。

以下是使用 axios 的方式来发起网络请求:

axios
  .get('https://api.example.com/data')
  .then(response) {
    console.log(response.data)
  }
  .catch(error) {
    console.error('发生错误:', error)
  }
  .finally(info) {
    console.error('请求完成:', info)
  }

通过以上的介绍,我们大体了解了几种主流的前端网络请求库是如何使用的了,其实他们之间的相似点还是很多的,原理暂不讨论,入参 urlmethod 是必要的,区别也仅在于一些使用形式,是否支持 Promise? 等。

说明:FlyHttp 工具的主要思想不是要重复建造轮子,也不会对这些优秀的网络请求库二次封装,而是以另一种思维方式与这些优秀的请求框架结合,其主要目的是加速自己在前端项目中的请求构建,优化在开发项目时的极致体验。

三. 总结

  • 以上通过对几种主流网络请求库的介绍和示例展示,相信帮助大家了解不同库的使用方法和特点。
  • FlyHttp 强调了优化请求流程、提高开发便利性的重要性,下一篇文章我们讲述 FlyHttp 设计思想