Vue3+Typescript+Axios封装网络请求

北杳同学2024-02-28 9:18

1、执行 npm i axios 命令安装Axios;

2、在src目录下新建utils文件夹;

3、在src/utils 目录下新建https.ts文件

javascript 复制代码

import type { AxiosRequestConfig, AxiosResponse } from 'axios';
import axios from 'axios';
import { showToast } from 'vant';
const statusCode: any = {
  200: '服务器成功返回请求的数据',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）',
  204: '删除数据成功',
  400: '请求错误(400)',
  401: '未授权，缺少令牌',
  403: '拒绝访问(403)',
  404: '请求出错(404)',
  408: '请求超时(408)',
  500: '服务器错误(500)',
  501: '服务未实现(501)',
  502: '网络错误(502)',
  503: '服务不可用(503)',
  504: '网络超时(504)',
};

const http = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000,
});

// 请求拦截器
http.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
http.interceptors.response.use(
  (response: AxiosResponse) => {
    // todo
    return response.data;
  },
  (error) => {
    const response = Object.assign({}, error.response);
    response &&
      showToast(
        statusCode[response.status] || '系统异常, 请检查网络或联系管理员！'
      );
    return Promise.reject(error);
  }
);

interface responseData<T> {
  code: number;
  data: T;
  msg: string;
}

const request = <T = unknown>(
  config: AxiosRequestConfig
): Promise<responseData<T>> => {
  return new Promise((resolve, reject) => {
    http
      .request<T>(config)
      .then((res: AxiosResponse) => resolve(res.data))
      .catch((err: { message: string }) => reject(err));
  });
};

export default request;

4、在src/utils 目录下新建api.ts文件

javascript 复制代码

import request from './http.ts';

/**
 * @description: 用户登录
 * @params data
 */
export const loginAPI = (data: any) => {
  return request({
    url: '/user/login', // mock接口
    method: 'post',
    data,
  });
};

/**
 * @description: 获取用户信息
 * @returns
 */
export const userInfo = () => {
  return request({
    url: '/user/info', // mock接口
    method: 'get',
  });
};