在前端开发中，我们经常需要跟后端进行交互，这时候我们就需要用到http请求了，而g4.http.js这个npm包就是一个方便进行http请求的包。本文将会详细介绍这个npm包的使用方法、深度和学习以及指导意义。
什么是g4.http.js
g4.http.js是一个轻量级的http请求库，它使用Promise对ajax进行了封装，可以用于浏览器和Node.js环境。此外，它还支持上传和下载文件、发送json等操作。
安装
安装g4.http.js非常简单，只需要使用npm命令即可：
npm install g4.http.js
或者可以在html中通过script标签引入
<script src="./node_modules/g4.http.js/dist/http.min.js"></script>
基本用法
g4.http.js使用Promise对ajax进行了封装，所以使用起来非常简单。
假设我们要向后端发送一个get请求：
import http from 'g4.http.js'
http.get('/api/user').then((res) => {
console.log(res.data)
})上面的代码表示发送一个get请求到/api/user地址，然后通过then方法处理返回的结果。
如果我们要发送一个post请求呢？
http.post('/api/user', {username: 'jack', password: '123'}).then((res) => {
console.log(res.data)
})同理，我们可以使用put和delete方法分别发送put和delete请求。
在发送http请求时，我们也可以设置请求头
http.get('/api/user', {headers: {'X-Token': 'xxxxxx'}}).then((res) => {
console.log(res.data)
})此外，g4.http.js也支持promise的方式封装jsonp请求。
http.jsonp('/api/user', {jsonpCallback: 'onData'}).then((res) => {
console.log(res.data)
})高级用法
g4.http.js的高级功能很多，下面将介绍其中较为常用的一些。
上传文件
g4.http.js可以很方便地上传文件。假设我们要上传一个文件到服务器：
let formData = new FormData()
formData.append('file', file)
http.post('/api/upload', formData).then((res) => {
console.log(res.data)
})下载文件
g4.http.js同样可以方便地下载文件。假设我们要下载一个文件：
http.download('/api/download').then((res) => {
console.log('下载成功')
})取消请求
有时候，我们需要取消一些正在发送的http请求。g4.http.js提供了很方便的方式来取消请求：
-- -------------------- ---- ------- --- --- - --------------------- ------------ -- -- --- ------ - ------------------------- --------------------- - ------------ ------------ -- ---------------
非标准restful请求
有时候，我们需要非标准restful请求，g4.http.js同样可以很好地支持。比如需要发送一个查询字符串参数，我们可以这样做：
http.get('/api/user?page=1&size=10').then((res) => {
console.log(res.data)
})发送json数据
g4.http.js支持普通json和FormData两种格式的请求体。如果我们需要发送一个json请求体：
http.post('/api/user', {username: 'jack', password: '123'}, {headers: {'Content-Type': 'application/json'}}).then((res) => {
console.log(res.data)
})总结
g4.http.js是一个非常方便易用的http请求包，它提供了丰富的功能，支持请求的各种常用操作。在前端开发中，g4.http.js会是一个非常好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f74238a385564ab6868