84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
import Vue from 'vue'
|
|
import { emit } from './event'
|
|
import { queryStringify } from './utils'
|
|
import { showAjaxError } 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"]')
|
|
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)
|
|
if (response.ok) {
|
|
return response.headers.get('Content-Type') === 'application/json'
|
|
? response.json()
|
|
: response.text()
|
|
}
|
|
const res = response.clone()
|
|
throw new HTTPError(await response.text(), res)
|
|
} 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))
|
|
}
|
|
|
|
export function post(url: string, data = empty): Promise<any> {
|
|
emit('beforeFetch', {
|
|
method: 'POST',
|
|
url,
|
|
data,
|
|
})
|
|
|
|
const isFormData = data instanceof FormData
|
|
|
|
const request = new Request(`${blessing.base_url}${url}`, {
|
|
body: isFormData ? data : JSON.stringify(data),
|
|
method: 'POST',
|
|
...init,
|
|
})
|
|
!isFormData && request.headers.set('Content-Type', 'application/json')
|
|
|
|
return walkFetch(request)
|
|
}
|
|
|
|
Vue.use(_Vue => {
|
|
Object.defineProperty(_Vue.prototype, '$http', {
|
|
get: () => ({ get, post }),
|
|
})
|
|
})
|
|
|
|
blessing.fetch = { get, post }
|