zl fetch
v6.0.6
zlFetch 是 fetch 的包装器，为您提供了一种发出请求的便捷方法。
其特点如下：
与本机fetch功能相比，生活质量得到改善
response.json() 、 response.text()或response.blob()catch块中。await时可以轻松处理错误——可以返回错误，因此您不必编写try/catch块。对本机fetch功能的其他改进
Content-Type标头根据body内容自动设置。headers 、 body 、 status等等。GET 、 POST 、 PUT 、 PATCH和DELETE方法的简写auth属性的授权标头。注意：zlFetch 是v4.0.0以来的 ESM 库。
# Installing through npm
npm install zl-fetch --save然后您可以通过将其导入 JavaScript 文件来使用它。
import zlFetch from 'zl-fetch'npm情况下使用zlFetch ：您可以通过 CDN 将 zlFetch 直接导入 JavaScript。
为此，您首先需要将script的类型设置为module ，然后导入zlFetch 。
< script type =" module " >
import zlFetch from 'https://cdn.jsdelivr.net/npm/[email protected]/src/index.js'
</ script > 您可以像使用普通的fetch函数一样使用 zlFetch。唯一的区别是您不必再编写response.json或response.text方法！
zlFetch 会自动为您处理它，因此您可以直接使用您的响应。
zlFetch ( 'url' )
. then ( response => console . log ( response ) )
. catch ( error => console . log ( error ) )zlFetch 包含这些常见 REST 方法的简写方法，因此您可以快速使用它们。
zlFetch . get ( /* some-url */ )
zlFetch . post ( /* some-url */ )
zlFetch . put ( /* some-url */ )
zlFetch . patch ( /* some-url */ )
zlFetch . delete ( /* some-url */ )zlFetch 支持json 、 text和blob响应类型，因此您不必编写response.json() 、 response.text()或response.blob() 。
目前不支持其他响应类型。如果您需要支持其他响应类型，请考虑使用您自己的响应处理程序
zlFetch 向您发送response对象中所需的所有数据。这包括以下内容：
headers : 响应头body ：响应主体status ：响应状态statusText ：响应状态文本response ：来自 Fetch 的原始响应我们这样做是为了让您不必自己找出headers 、 status 、 statusText甚至response对象的其余部分。
v4.0.0中的新增功能：您可以通过添加debug选项来调试请求对象。这将显示一个包含正在构造的请求debug对象。
urlmethodheadersbody zlFetch ( 'url' , { debug : true } )
. then ( { debug } = > console . log ( debug ) )zlFetch 将所有 400 和 500 错误定向到catch方法。错误包含与响应相同的信息。
headers : 响应头body ：响应主体status ：响应状态statusText ：响应状态文本response ：来自 fetch 的原始响应这使得 zlFetch 非常易于使用 Promise。
zlFetch ( 'some-url' ) . catch ( error => {
/* Handle error */
} )
// The above request can be written in Fetch like this:
fetch ( 'some-url' )
. then ( response => {
if ( ! response . ok ) {
Promise . reject ( response . json )
}
} )
. catch ( error => {
/* Handle error */
} )async / await时轻松处理错误zlFetch 允许您将所有错误传递到errors对象中。您可以通过添加returnError选项来做到这一点。当您大量使用async/await时，这非常有用。
const { response , error } = await zlFetch ( 'some-url' , { returnError : true } ) 您可以添加query或queries作为选项，zlFetch 将自动为您创建一个查询字符串。将其与GET请求一起使用。
zlFetch ( 'some-url' , {
queries : {
param1 : 'value1' ,
param2 : 'to encode' ,
} ,
} )
// The above request can be written in Fetch like this:
fetch ( 'url?param1=value1¶m2=to%20encode' )body内容的Content-Type生成zlFetch 根据您的body数据适当设置Content-Type 。它支持三种数据：
如果你传入一个object ，zlFetch 会将Content-Type设置为application/json 。它还会JSON.stringify你的身体，这样你就不必自己做。
zlFetch . post ( 'some-url' , {
body : { message : 'Good game' } ,
} )
// The above request is equivalent to this
fetch ( 'some-url' , {
method : 'post' ,
headers : { 'Content-Type' : 'application/json' } ,
body : JSON . stringify ( { message : 'Good game' } ) ,
} ) zlFetch 包含一个toObject帮助器，可让您将表单数据转换为对象。这使得使用表单进行 zlFetch 变得非常容易。
import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )
zlFetch ( 'some-url' , {
body : toObject ( data ) ,
} )如果您传入一个字符串，zlFetch 会将Content-Type设置为application/x-www-form-urlencoded 。
zlFetch 还包含一个toQueryString方法，可以帮助您将对象转换为查询字符串，以便您可以轻松使用此选项。
import { toQueryString } from 'zl-fetch'
zlFetch . post ( 'some-url' , {
body : toQueryString ( { message : 'Good game' } ) ,
} )
// The above request is equivalent to this
fetch ( 'some-url' , {
method : 'post' ,
headers : { 'Content-Type' : 'application/x-www-form-urlencoded' } ,
body : 'message=Good%20game' ,
} )如果您传入表单数据，zlFetch 将让本机fetch函数处理Content-Type 。通常，这将使用带有默认选项的multipart/form-data 。如果您使用它，请确保您的服务器可以接收multipart/form-data ！
import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )
zlFetch ( 'some-url' , { body : data } )
// The above request is equivalent to this
fetch ( 'some-url' , { body : data } )
// Your server should be able to receive multipart/form-data if you do this. If you're using Express, you can a middleware like multer to make this possible:
import multer from 'multer'
const upload = multer ( )
app . use ( upload . array ( ) ) v5.0.0中的重大更改：如果您传入Content-Type标头，zlFetch 将不再设置正文内容的格式。我们希望您能够传入正确的数据类型。 （我们必须这样做才能支持上面提到的新 API）。
如果您为 zlFetch 提供auth属性，它将为您生成一个授权标头。
如果您传入一个string （通常用于令牌），它将生成一个 Bearer Auth。
zlFetch ( 'some-url' , { auth : 'token12345' } )
// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
headers : { Authorization : `Bearer token12345` } ,
} )如果您传入一个object ，zlFetch 将为您生成一个基本身份验证。
zlFetch ( 'some-url' , {
auth : {
username : 'username'
password : '12345678'
}
} )
// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
headers : { Authorization : `Basic ${ btoa ( 'username:12345678' ) } ` }
} ) ;您可以使用预定义选项创建zlFetch的实例。如果您需要发送具有类似options或url请求，这将非常有用。
url为必填项options是可选的 import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )所有实例也都有速记方法。
// Shorthand methods
const response = api . get ( /* ... */ )
const response = api . post ( /* ... */ )
const response = api . put ( /* ... */ )
const response = api . patch ( /* ... */ )
const response = api . delete ( /* ... */ ) v5.0.0中的新功能
您现在可以使用zlFetch实例而无需传递 URL。如果您创建了具有正确端点的实例，这非常有用。
import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )所有实例也都有速记方法。
// Shorthand methods
const response = api . get ( ) // Without URL, without options
const response = api . get ( 'some-url' ) // With URL, without options
const response = api . post ( 'some-url' , { body : 'message=good+game' } ) // With URL, with options
const response = api . post ( { body : 'message=good+game' } ) // Without URL, with options如果要处理 zlFetch 不支持的响应，可以将customResponseParser: true传递到选项中。这将返回来自正常 Fetch 请求的响应，而无需 zlFetch 进行任何其他处理。然后，您可以使用response.json()或您认为合适的其他方法。
const response = await zlFetch ( 'url' , {
customResponseParser : true ,
} )
const data = await response . arrayBuffer ( )
