[筆記] ofetch api 獲得 statusText 和 status @地瓜大的飛翔旅程

章節連結

內容

程式碼

ofetch 若要像 axios 般，於回傳值可以取得 statusText 和 status 的話，會需要透過 raw 的方法先解構出來，然後再自行包裝成一個 Promise 物件吐回。

內容

程式碼

import { cloneDeep, omit } from 'lodash-es'
import type { $Fetch, FetchOptions, FetchResponse } from 'ofetch'

/**
 * Creates an HTTP request function using the provided fetcher.
 * @param fetcher An instance of $Fetch
 * @returns A function to make API requests.
 */
export const createHttpClient = (fetcher: $Fetch) => {
  return async function call<T>({
    method,
    url,
    data,
    params,
    headers,
    fetchOptions,
  }: {
    method: string
    url: string
    data?: object
    params?: object
    headers?: Record<string, string>
    fetchOptions?: FetchOptions<'json'>
  }): Promise<{ data?: T } & Omit<FetchResponse<T>, '_data'>> {
    const rawResponse = await fetcher.raw<T>(url, {
      method,
      body: data ? JSON.stringify(data) : undefined,
      params: params || undefined,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        ...headers,
      },
      onRequest: () => {
        // console.log('config on Req', req)
      },
      onRequestError: () => {
        // console.log('config on Req Error', req)
      },
      onResponse: () => {
        // console.log('config on Res', res)
      },
      onResponseError: () => {
        // console.log('config on Res Error', res)
      },
      ...fetchOptions,
    })

    const resultData = {
      ...rawResponse._data,
      ...cloneDeep(omit(rawResponse, ['_data'])),
    }

    return new Promise((resolve) => resolve(resultData))
  }
}

import { cloneDeep, omit } from 'lodash-es'

import type { $Fetch, FetchOptions, FetchResponse } from 'ofetch'

/**

* Creates an HTTP request function using the provided fetcher.

* @param fetcher An instance of $Fetch

* @returns A function to make API requests.

export const createHttpClient = (fetcher: $Fetch) => {

return async function call<T>({

method,

url,

data,

params,

headers,

fetchOptions,

}: {

method: string

url: string

data?: object

params?: object

headers?: Record<string, string>

fetchOptions?: FetchOptions<'json'>

}): Promise<{ data?: T } & Omit<FetchResponse<T>, '_data'>> {

const rawResponse = await fetcher.raw<T>(url, {

method,

body: data ? JSON.stringify(data) : undefined,

params: params || undefined,

headers: {

'Content-Type': 'application/json;charset=utf-8',

...headers,

onRequest: () => {

// console.log('config on Req', req)

onRequestError: () => {

// console.log('config on Req Error', req)

onResponse: () => {

// console.log('config on Res', res)

onResponseError: () => {

// console.log('config on Res Error', res)

...fetchOptions,

})

const resultData = {

...rawResponse._data,

...cloneDeep(omit(rawResponse, ['_data'])),

}

return new Promise((resolve) => resolve(resultData))

}

按讚加入粉絲團