@acto/ajax 中文文档教程
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
类只是一组简单的函数,抽象了一些逻辑。 这些功能与 AuthToken
和 JWT
功能完全相同,只是没有授权位。 它们都使用 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.