blessing-skin-server/resources/assets/src/scripts/net.ts
2020-06-18 11:45:10 +08:00

153 lines
3.5 KiB
TypeScript

import { emit } from './event'
import { showModal } from './notify'
import { t } from './i18n'
export interface ResponseBody<T = null> {
code: number
message: string
data: T extends null ? never : T
}
class HTTPError extends Error {
response: Response
constructor(message: string, response: Response) {
super(message)
this.response = response
}
}
const empty = Object.create(null)
export const init: RequestInit = {
credentials: 'same-origin',
headers: new Headers({
Accept: 'application/json',
}),
}
function retrieveToken() {
const csrfField = document.querySelector<HTMLMetaElement>(
'meta[name="csrf-token"]',
)
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
return csrfField?.content || ''
}
export async function walkFetch(request: Request): Promise<any> {
request.headers.set('X-CSRF-TOKEN', retrieveToken())
try {
const response = await fetch(request)
const cloned = response.clone()
const body =
response.headers.get('Content-Type') === 'application/json'
? await response.json()
: await response.text()
if (response.ok) {
return body
}
let message: string = body.message
if (response.status === 422) {
// Process validation errors from Laravel.
const {
errors,
}: {
message: string
errors: { [field: string]: string[] }
} = body
return {
code: 1,
message: Object.keys(errors).map((field) => errors[field][0])[0],
}
} else if (response.status === 419) {
showModal({
mode: 'alert',
text: t('general.csrf'),
})
return
} else if (response.status === 403 || response.status === 400) {
showModal({
mode: 'alert',
text: message,
type: 'warning',
})
return
}
if (body.exception && Array.isArray(body.trace)) {
const trace = (body.trace as Array<{ file: string; line: number }>)
.map((t, i) => `[${i + 1}] ${t.file}#L${t.line}`)
.join('<br>')
message = `${message}<br><details>${trace}</details>`
}
throw new HTTPError(message || body, cloned)
} catch (error) {
emit('fetchError', error)
showModal({
mode: 'alert',
title: t('general.fatalError'),
dangerousHTML: error.message,
type: 'danger',
okButtonType: 'outline-light',
})
return { code: -1, message: t('general.fatalError') }
}
}
export function get<T = any>(url: string, params = empty): Promise<T> {
emit('beforeFetch', {
method: 'GET',
url,
data: params,
})
const qs = new URLSearchParams(params)
return walkFetch(new Request(`${blessing.base_url}${url}?${qs}`, init))
}
function nonGet<T = any>(
method: string,
url: string,
data?: FormData | object,
): Promise<T> {
emit('beforeFetch', {
method: method.toUpperCase(),
url,
data,
})
const request = new Request(`${blessing.base_url}${url}`, {
body: data instanceof FormData ? data : JSON.stringify(data),
method: method.toUpperCase(),
...init,
})
if (!(data instanceof FormData)) {
request.headers.set('Content-Type', 'application/json')
}
return walkFetch(request)
}
export function post<T = any>(url: string, data?: object): Promise<T> {
return nonGet<T>('POST', url, data)
}
export function put<T = any>(url: string, data?: object): Promise<T> {
return nonGet<T>('PUT', url, data)
}
export function del<T = any>(url: string, data?: object): Promise<T> {
return nonGet<T>('DELETE', url, data)
}
blessing.fetch = {
get,
post,
put,
del,
}