Vue3+Typescript+Axios封装网络请求

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',
  });
};
相关推荐
木木黄木木23 分钟前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
美食制作家26 分钟前
【无标题】Threejs第一个3D场景
javascript·three
郁大锤1 小时前
Flask与 FastAPI 对比:哪个更适合你的 Web 开发?
前端·flask·fastapi
HelloRevit2 小时前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
ohMyGod_1232 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
eternal__day2 小时前
第三期:深入理解 Spring Web MVC [特殊字符](数据传参+ 特殊字符处理 + 编码问题解析)
java·前端·spring·java-ee·mvc
醋醋2 小时前
Vue2源码记录
前端·vue.js
艾克马斯奎普特2 小时前
Vue.js 3 渐进式实现之响应式系统——第四节:封装 track 和 trigger 函数
javascript·vue.js
江耳3 小时前
从10秒到无限流:我用Vercel+NextJS实现AI流式对话遇到的超时问题及解决方案
前端
总之就是非常可爱3 小时前
三分钟让你看懂alien-signals computed基本原理
前端