Vue3中集成VueRequest的使用

VueRequest

安装

npm install vue-request
# or
yarn add vue-request

用例

<template>
  <div>
    <div v-if="loading">loading...</div>
    <div v-if="error">failed to fetch</div>
    <div v-if="data">Hey! {{ data }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const { data, loading, error } = useRequest(service);

    return {
      data,
      loading,
      error,
    };
  },
});
</script>

集成Axios

安装

npm install axios
# or
yarn add axios

配置

//config.ts
export default {
  baseURL: '', // api的base_url
  timeout: 60000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
};

import axios, { AxiosRequestConfig } from 'axios';
import baseConfig from '@/configs/config';

interface Code {
  [key: number]: string;
}

const statusCode: Code = {
  200: '请求成功！',
  400: '请求参数或路径错误。',
};

const errorHandler = (error: any) => {
  const { response } = error;
  if (response && response.status) {
    const { status } = response;
    if (status < 400) {
      // 一些操作
    }else if(status < 500){
    // ...一些操作
  } else {
    // 一些操作
  }

  return response;
};

// 创建实例
const service = axios.create(baseConfig);

// 请求拦截
axios.interceptors.request.use(
  (config): AxiosRequestConfig<unknown> => {
    return config;
  }
);
// 响应拦截
axios.interceptors.response.use(
  (res) => {
    return res;
  },
  (error) => {
    errorHandler(error);
    return error;
  }
);

export default service;

请求

//user.ts
import axios from '@/plugins/axios';

export const getUser = (params: object) => {
  return axios.get('api/user', {
    params
  });
};

封装

//action.ts

import { useRequest as vueRequest } from 'vue-request';
import { BaseOptions } from 'vue-request/dist/types/core/types';
import { IService } from 'vue-request/dist/types/core/utils/types';

const useRequest = (
  request: IService<unknown, any>,
  onSuccess?: (res: unknown) => void,
  defaultOption?: BaseOptions<unknown, any>
) => {
  return vueRequest(request, {
    manual: true,
    formatResult: (response) => response,
    loadingDelay: 500,
    debounceInterval: 1000,
    onSuccess: () => {
      // 一些操作
      //  if (res === null) return;
      // if (onSuccess && typeof onSuccess === 'function') {
      //   onSuccess(res.data);
      // } else {
      //   ElMessage.success(res.message);
      // }
    },
    onError: (error) => {
      //一些操作
    },
    ...(defaultOption || {})
  });
};

export default useRequest;

使用

// Page.vue
import { getUser } from '@/api/base';
import useRequest from '@/plugins/action';

const { data, run } = useRequest(getUser);
run({ id: '112233' });

错误处理

• 错误处理有两种方式
  • 交回给axios的interceptors中处理
  • 交给VueRequest处理(本文)

// action.ts
//作废————————————————
// 请求封装中
  onError: (error) => {
    errorHandler(error);
  },

由于使用的其他服务器开发，使用到axios原本请求，故把错误处理交回axios处理

// 响应拦截
axios.interceptors.response.use(
  (res) => {
    return Promise.resove(res); //改成Promise模式
  },
  (error) => {
    errorHandler(error);
    return Promise.reject(error); //改成Promise模式 记得return
  }
);