128 lines
3.2 KiB
TypeScript
128 lines
3.2 KiB
TypeScript
import Vue from 'vue'
|
|
import { emit } from './event'
|
|
import { queryStringify } from './utils'
|
|
import { showAjaxError, showModal } from './notify'
|
|
|
|
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: HTMLMetaElement | null =
|
|
document.querySelector('meta[name="csrf-token"]')
|
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
return (csrfField && 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 === 403) {
|
|
showModal(message, undefined, '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('\n')
|
|
message = `${message}\n<details>${trace}</details>`
|
|
}
|
|
|
|
throw new HTTPError(message || body, cloned)
|
|
} catch (error) {
|
|
emit('fetchError', error)
|
|
showAjaxError(error)
|
|
}
|
|
}
|
|
|
|
export function get(url: string, params = empty): Promise<any> {
|
|
emit('beforeFetch', {
|
|
method: 'GET',
|
|
url,
|
|
data: params,
|
|
})
|
|
|
|
const qs = queryStringify(params)
|
|
|
|
return walkFetch(new Request(`${blessing.base_url}${url}${qs && `?${qs}`}`, init))
|
|
}
|
|
|
|
function nonGet(method: string, url: string, data: any): Promise<any> {
|
|
emit('beforeFetch', {
|
|
method: method.toUpperCase(),
|
|
url,
|
|
data,
|
|
})
|
|
|
|
const isFormData = data instanceof FormData
|
|
|
|
const request = new Request(`${blessing.base_url}${url}`, {
|
|
body: isFormData ? data : JSON.stringify(data),
|
|
method: method.toUpperCase(),
|
|
...init,
|
|
})
|
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
!isFormData && request.headers.set('Content-Type', 'application/json')
|
|
|
|
return walkFetch(request)
|
|
}
|
|
|
|
export function post(url: string, data = empty): Promise<any> {
|
|
return nonGet('POST', url, data)
|
|
}
|
|
|
|
export function put(url: string, data = empty): Promise<any> {
|
|
return nonGet('PUT', url, data)
|
|
}
|
|
|
|
export function del(url: string, data = empty): Promise<any> {
|
|
return nonGet('DELETE', url, data)
|
|
}
|
|
|
|
Vue.use(_Vue => {
|
|
Object.defineProperty(_Vue.prototype, '$http', {
|
|
get: () => ({
|
|
get, post, put, del,
|
|
}),
|
|
})
|
|
})
|
|
|
|
blessing.fetch = {
|
|
get, post, put, del,
|
|
}
|