@acto/ajax 中文文档教程

发布于 3年前 浏览 13 项目主页 更新于 3年前

ActoJS Ajax

Ajax,没有更好的名字,是一个方便的 HTTP 抽象的集合,构建在 Wretch 之上。

Ajax 分为 3 类:

  • Simple (no authorization)
  • AuthToken (Authtoken is appended to the end of the URI)
  • JWT (Sets Authorization header with a given JWT as the bearer)

Simple 类只是一组简单的函数,抽象了一些逻辑。 这些功能与 AuthTokenJWT 功能完全相同,只是没有授权位。 它们都使用 application/json 设置了一个 accept header。

由于 Ajax 构建在 Wretch 之上,因此返回 Wretch ResponseChain 以支持常规 Promise。 Wretch Response 是可链接的,就像 Promise 一样,但有一系列额外的辅助函数可用于进一步配置您的请求。
例如,您可以链接一系列 Catchers,然后在后面跟一个 响应类型

为了配置您希望如何处理不同 HTTP 响应状态代码的默认值,Ajax 公开了一个 setResponseHandling(handler: (res: ResponseChain) => ResponseChain): void 函数。 通过使用此函数设置默认响应处理程序,通过 Ajax 库发出的每个 HTTP 请求都将使用这些默认值。 例如,如果您想在每次收到 HTTP 500 时都写入一个日志错误,您可以执行以下操作:setResponseHandling(res => res.internalError(() => console.log('You刚刚遇到内部服务器错误...')))。 现在,如果您调用 getJson('/api/user') 并且它收到 HTTP 500 状态代码,“您刚刚遇到内部服务器错误”将写入标准输出。 这也非常有用,如果您想在用户收到 HTTP 401 时向他们显示登录页面。然而,这些只是默认设置,因为 ResponseChain 是可链接的,如果需要,您可以在本地覆盖这些设置。

Form 函数变体中,Wretch 自动将您的 Javascript 对象主体转换为 FormData 对象。

所有函数都包含一个可选的 Options 参数,以及一个可选的最后一个 AbortController 参数。

Simple 类别公开了以下功能:

  • getJSON: (url: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postJSON: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putJSON: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteJSON: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • getForm: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postForm: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putForm: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteForm: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain

AuthToken 类别公开了以下功能:

  • getJSONAuthToken: (url: string, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postJSONAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putJSONAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteJSONAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • getFormAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postFormAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putFormAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteFormAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain

JWT 类别公开了以下功能:

  • getJSONJwt: (url: string, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postJSONJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putJSONJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteJSONJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postFormJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • getFormJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putFormJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteFormJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain

如果您需要构建一个非常特别的雪花,然后您可以通过调用 getWretch() 函数直接获取 Wretch 对象。

ActoJS Ajax

Ajax, in lack of a better name, is a collection of handy HTTP abstractions, built on top of Wretch.

Ajax is split into 3 categories:

  • Simple (no authorization)
  • AuthToken (Authtoken is appended to the end of the URI)
  • JWT (Sets Authorization header with a given JWT as the bearer)

The Simple category is just a set of simple functions, abstracting away a bit of logic. These are the exact same functions as the AuthToken and JWT functions, just without the authorization bit. They all set an accept header with application/json.

As Ajax is built on top of Wretch, a Wretch ResponseChain is returned in favor of a regular Promise. A Wretch Response is chainable, just like a Promise, but there are a series of additional helper functions that you can use to further configure your request.
For instance, you can chain a series of Catchers which you then follow by a Response Type.

In order to configure defaults for how you would like to handle different HTTP response status codes, Ajax exposes a setResponseHandling(handler: (res: ResponseChain) => ResponseChain): void function. By setting a default response handler using this function, every single HTTP request made through the Ajax library will use those defaults. For example, if you want to write a log error every time that you receive an HTTP 500, you could do the following: setResponseHandling(res => res.internalError(() => console.log('You just experienced an internal server error...'))). Now if you call getJson('/api/user') and it receives an HTTP 500 status code, "You just experienced an internal server error" will be written to stdout. This can also be very useful, if you want to show your users the login page, whenever they receive an HTTP 401. These however are just defaults, as the ResponseChain is chainable, you can overwrite these locally if you need to.

In the Form varieties of the functions, Wretch automatically converts your Javascript object body to an FormData object.

All functions contain an optional Options parameter, as well as an optional last AbortController parameter.

The Simple category exposes the following functions:

  • getJSON: (url: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postJSON: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putJSON: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteJSON: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • getForm: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postForm: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putForm: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteForm: (url: string, body: object, options?: WretcherOptions, controller?: AbortController) => ResponseChain

The AuthToken category exposes the following functions:

  • getJSONAuthToken: (url: string, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postJSONAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putJSONAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteJSONAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • getFormAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postFormAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putFormAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteFormAuthToken: (url: string, body: object, authToken: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain

The JWT category exposes the following functions:

  • getJSONJwt: (url: string, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postJSONJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putJSONJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteJSONJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • postFormJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • getFormJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • putFormJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain
  • deleteFormJwt: (url: string, body: object, jwt: string, options?: WretcherOptions, controller?: AbortController) => ResponseChain

If you need to build a really special snowflake, then you can get the Wretch object directly, by calling the getWretch() function.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文