Главная страница>Исходный код ASP>Другие категории
Скачать

zlFetch

zlFetch — это оболочка fetch, предоставляющая удобный способ выполнения запросов.

Его особенности заключаются в следующем:

  • Улучшение качества жизни по сравнению со встроенной функцией fetch

    • Используйте ответ сразу, не используя response.json() , response.text() или response.blob()
    • Обработка ошибок, подобная обещаниям: все ошибки 400 и 500 автоматически направляются в блок catch .
    • Простая обработка ошибок при использовании await — ошибки могут быть возвращены, поэтому вам не нужно писать блок try/catch .

  • Дополнительные улучшения по сравнению со встроенной функцией fetch .

    • Заголовки Content-Type устанавливаются автоматически на основе содержимого body .
    • Получите все, что вам нужно о своем ответе — headers , body , status и многое другое.
    • Отладка вашего запроса, не глядя на панель «Сеть»
    • Сокращение для методов GET , POST , PUT , PATCH и DELETE .
    • Помощник для генерации строк запроса, чтобы вам не приходилось возиться с параметрами запроса.
    • Генерирует заголовки авторизации со свойством auth .
    • Создавайте экземпляры для хранения URL-адресов и параметров, чтобы вам не приходилось повторяться.

Примечание. zlFetch — это библиотека ESM, начиная с v4.0.0 .

Установка zlFetch

Через npm (рекомендуется) 

 # Installing through npm
npm install zl-fetch --save

Затем вы можете использовать его, импортировав в свой файл JavaScript. 

 import zlFetch from 'zl-fetch'

Использование zlFetch без npm :

Вы можете импортировать zlFetch непосредственно в JavaScript через CDN.

Для этого вам сначала нужно установить тип вашего script на module , а затем импортировать zlFetch . 

 < script type =" module " >
  import zlFetch from 'https://cdn.jsdelivr.net/npm/[email protected]/src/index.js'
</ script >

Быстрый старт

Вы можете использовать zlFetch как обычную функцию fetch . Единственная разница в том, что вам больше не нужно писать метод response.json или response.text !

zlFetch автоматически обработает это за вас, и вы сможете сразу приступить к использованию своего ответа. 

 zlFetch ( 'url' )
  . then ( response => console . log ( response ) )
  . catch ( error => console . log ( error ) )

Сокращенные методы для GET, POST, PUT, PATCH и DELETE.

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 , содержащий создаваемый запрос.

  • url
  • method
  • headers
  • body
 zlFetch ( 'url' , { debug : true } )
  . then ( { debug } = > console . log ( debug ) )

Обработка ошибок

zlFetch направляет все ошибки 400 и 500 в метод catch . Ошибки содержат ту же информацию, что и ответ.

  • headers : заголовки ответов
  • body : тело ответа
  • status : статус ответа
  • statusText : текст статуса ответа
  • response : исходный ответ от выборки

Это делает zlFetch очень простым в использовании с обещаниями. 

 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&param2=to%20encode' )

Генерация Content-Type на основе содержимого body

zlFetch устанавливает Content-Type соответствующим образом в зависимости от данных вашего body . Он поддерживает три типа данных:

  • Объект
  • Строки запроса
  • Данные формы

Если вы передадите 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 (обычно для токенов), она сгенерирует аутентификацию носителя. 

 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

Вы можете создать экземпляр 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 ( )
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все