一. 前言
首先介绍一下，FlyHttp 是一个自动生成前端代码 service 层的工具，目的就是要解放你的双手，化繁为简，可降低代码量 99% ！
在开发前端项目时，尤其是目前绝大多数的项目都是前后端分离式开发的形式，因此我们经常需要对接后端接口，进行前后端交互。而基于这些，就出现了琳琅满目的前端请求框架！
从最初的 XMLHttpRequest 到 ajax、Fetch API ，再到 axios，各种各样的搭配不同框架的网络请求库应运而生，它们服务于不同的前端框架，进行优秀的前后端数据交互，给我们前端开发者提供了便利性。
虽然很方便，但是我却不满足，因为不喜欢折腾的程序员不是好将军，写代码时，还是时常问一下自己，是否还能再方便些？
因为网络请求通常就是最常用的 GET PUT POST DELETE PATCH 这几种，而且大多数中声明的请求方法都是重复的，是有据可循的，因此我想从这方面着手，能否优化请求流程，解放双手，进一步为开发提供便利性！
CTRL + CV 的开发模式，我们一定要摒弃！
本文介绍的工具库是 Flyit 工具库中的 http 模块 FlyHttp，核心目的就是要省略某些重复的代码，部分配置化实现极致开发体验！
二. 认识网络请求
2.1 前端开发模式
在前端开发中，网络请求库通常与不同的前端框架中搭配使用，目前前端开发形式可能包括但不限于以下几种形式，我简单总结了以下几种：
jQuery：
jQuery是早期JavaScript框架中的王者，其中提供了方便的AJAX方法来发送网络请求。Vue：
Vue.js可以说是在国内前端框架的佼佼者，提供了axios的插件来处理网络请求。React：
React是另一款热门的前端框架，它本身并没有集成网络请求的功能，所以通常也会搭配像axios或者Fetch API这样的库来进行网络请求。uni-app：
uni-app是一个基于Vue.js的跨平台应用开发框架，在uni-app中，可以使用封装了网络请求功能的uni.requestAPI 来进行网络请求。原生 JavaScript：通过原生的
XMLHttpRequest对象或者Fetch API来发起网络请求。
2.2 网络请求库
我们可以从以上这些常用的前端框架中总结出来，主流的前端请求库主要包括以下几种：
axios：基于
Promise的 HTTP 客户端，可以在浏览器和 Node.js 中使用。具有简洁的 API、易用的请求拦截和响应拦截、自动处理请求和响应数据等特点，被广泛应用于前端项目中。fetch：现代浏览器原生支持的 API，用于替代传统的
XMLHttpRequest对象。jQuery：尽管 jQuery 已经逐渐被更现代的框架替代，主要是对于一些传统项目仍然在继续使用。
原生 XMLHttpRequest：传统原生的的 XMLHttpRequest 对象，基本不会在代码中使用，仅做了解即可。
因此本文也会以这些请求库为基准，同时也回顾下在实际开发中，这些请求库的常规使用思路！
2.3 请求示例
以以上介绍的请求库为准，接下来我们来看一下在实际开发中，这些网络请求库是如何进行使用的！
2.3.1 使用原生 XMLHttpRequest
XMLHttpRequest 是实现 Ajax（Asynchronous 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
jQuery 的 ajax 方法主要在 jQuery 库中使用。在早期的前端开发中，jQuery 是非常流行的前端库，其提供的 ajax 方法简化了通过 XMLHttpRequest 发起异步请求的操作。
以下是使用 jQuery 的 ajax 的方式来发起网络请求：
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，用于网络请求和响应。它提供了一种更强大和灵活的方式来处理网络请求，取代了传统的 XMLHttpRequest。Fetch 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)
}
通过以上的介绍，我们大体了解了几种主流的前端网络请求库是如何使用的了，其实他们之间的相似点还是很多的，原理暂不讨论，入参 url、method 是必要的，区别也仅在于一些使用形式，是否支持 Promise? 等。
说明：FlyHttp 工具的主要思想不是要重复建造轮子，也不会对这些优秀的网络请求库二次封装，而是以另一种思维方式与这些优秀的请求框架结合，其主要目的是加速自己在前端项目中的请求构建，优化在开发项目时的极致体验。
三. 总结
- 以上通过对几种主流网络请求库的介绍和示例展示，相信帮助大家了解不同库的使用方法和特点。
- FlyHttp 强调了优化请求流程、提高开发便利性的重要性，下一篇文章我们讲述 FlyHttp 设计思想