vueuse的useFetch封装

随着浏览器的迭代升级，我们迎来了fetch的方式去请求数据，在vue2的时候或许我们需要使用axios请求数据。vue2时代或许需要兼容IE9，随着vue3生态越来越完善，我们是否可以放弃axios了呢。axios解决的是xhr访问数据的使用习惯，这层封装在使用好久之后，发现就感觉是fecth的过度。我们请求过程中，喝不直接使用fecth呢。

以前啊有一个umi-request，可惜已经两年不维护了。来到vue3的时代，很庆幸有了vueuse，在vueuse库中有一个useFetch封装库。我们使用axios的时候也不会去使用太复杂的方法，无非就是get，post，del，put居多，还有就是before，after两个钩子。 在此，我使用useFetch做了一个小小的封装，使用的是ts。

import {useFetch} from '@vueuse/core'
import qs from "qs";
const baseUrl = '/'
export const useRequest = () => {
  const paramFixed = {}
  /**
   * 去请求方式
   */
  return {
    post<T>(url: string, data?: any) {
      const json = wdRequest<T>(url).post(qs.stringify({ ...paramFixed, ...data })).json<T>();
      return json
    }
  }
}
function wdRequest<T>(url: string) {
  return useFetch<T>(baseUrl + url, {
    /**
     * 请求之前
     * @param param0 
     * @returns 
     */
    async beforeFetch({ options }) {
      /**
       * 设置header头
       */
      options.headers = {
        /**
         * 表单方式提交
         */
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
      }
      return { options }
    },
    /**
     * 请求之后
     * @param res 
     * @returns 
     */
    afterFetch(res) {
      if (!res.data.result) {
        ElMessage.error(res.data.msg??res.data.message)
        return Promise.reject(res.data)
      }
      return res
    }
  })
}