4z 中文文档教程

Question

zlFetch

Features

1. zlFetch helps you create your request. It helps you:
   1. Create query parameters for GET requests
   2. Do Basic and Bearer-type authorization
   3. Formats body for JSON or x-www-form-urlencoded
2. zlFetch transforms the response:
   1. It lets you use your responses in the first then method.
   2. It directs 400 and 500 errors into catch.

Download/install

你可以通过 npm 安装 zlFetch。

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

如果您想在浏览器中使用 zlFetch，请下载 dist/index.min.js< /a> 或使用下面的 CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/zl-fetch"></script>

Quick Start

Basic usage (in Browser)

// Basic usage
zlFetch("http://your-website.com")
  .then(response => console.log(response))
  .catch(error => console.log(error));

如果您愿意，可以使用 ES6 方式导入 zlFetch

// ES6 imports
import zlFetch from "zl-fetch";
zlFetch("http://your-website.com")
  .then(response => console.log(response))
  .catch(error => console.log(error));

Basic usage (in Node)

：您可以像浏览器一样使用它！

const zlFetch = require("zl-fetch");
zlFetch("http://your-website.com")
  .then(response => console.log(response))
  .catch(error => console.log(error));

Response and Error objects

zlFetch 更改响应和错误对象。 在 zlFetch 中，response 和 error 对象都包含以下五个属性：

1. headers: response headers
2. body: response body
3. status: response status
4. statusText: response status text
5. response: original response from Fetch

zlFetch("http://your-website.com")
  .then(response => {
    const headers = response.headers;
    const body = response.body;
  })
  .catch(error => {
    const headers = error.headers;
    const body = error.body;
    const status = error.status;
  });

GET requests

要发送 GET 请求，请输入端点作为第一个参数。

// With zlFetch
zlFetch("http://your-website.com");

// With fetch api
fetch("http://your-website.com");

如果您提供 queries 选项，zlFetch 会为您格式化和编码查询参数。

zlFetch('http://your-website.com', {
  queries: {
    param1: 'value1',
    param2: 'to encode'
  }
})

// With fetch API
fetch('http://your-website.com?param1=value1&param2=to%20encode')

POST requests

将 method 设置为 post 以发送 post 请求。 zlFetch 将为您设置 Content-Type 将设置为 application/json。 它还会自动将您的 body 转换为 JSON 字符串。

// with zlFetch
zlFetch("http://your-website.com", {
  method: "post",
  body: {
    key: "value"
  }
});

// Resultant fetch api
fetch("http://your-website.com", {
  method: "post",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    key: "value"
  })
});

// Setting other content type
zlFetch("http://your-website.com", {
  method: "post",
  headers: { "Content-Type": "application/x-www-form-urlencoded" }
});

Other Content-Types

您可以选择自己覆盖 Content-Type。 为此，传递 headers 和 Content-Type 属性。

fetch("http://your-website.com", {
  method: "post",
  headers: { "Content-Type": "Another Content Type" },
  body: {
    key: "value"
  )
});

如果 Content-Type 设置为 application/x-www-form-urlencoded，zlFetch 将格式化 body 以对 x 有效-www-form-urlencoded。

zlFetch("http://your-website.com", {
  method: "post",
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  body: {
    key: "value",
    web: "https://google.com"
  }
});

// Resultant fetch api
fetch("http://your-website.com", {
  method: "post",
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  body: "key=value&web=https%3A%2F%2Fgoogle.com"
});

Authentication/Authorization

如果您包含 auth 属性，zlFetch 会为您添加 Authorization 标头。

zlFetch("http://your-website.com", {
  auth: /* Your credentials */
})

Basic Authentication

要执行基本身份验证，请将 username 和 password 传递到 auth 中。

zlFetch("http://your-website.com", {
  auth: {
    username: 'your-username'
    password: 'your-password'
  }
})

// Resultant fetch api
fetch("http://your-website.com", {
  headers: { Authorization: `Basic ${btoa("yourusername:12345678")}` }
});

Token/Bearer Authentication

要执行基于令牌的身份验证，请将您的令牌传递给 auth。

zlFetch("http://your-website.com", {
  auth: "token12345"
});

// Resultant fetch api
fetch("http://your-website.com", {
  headers: { Authorization: `Bearer token12345` }
});

Shorhand methods

从 v3.0 开始，zlFetch 支持方法简写。

支持的简写方式包括：

1. get
2. post
3. put
4. patch
5. delete

// These two are the same
zlFetch.post('http://your-website.com')
zlFetch('http://your-website.com', { method: 'post' })

Response Types

zlFetch 目前只支持json 和text 响应类型。 如果您遇到响应类型错误，请提交问题，我会尽快提供支持。 （虽然这可能需要时间！）