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',
  });
};
相关推荐
我头上有犄角ovo1 分钟前
🤯 什么?!还在跪求后端大佬帮你上线项目?NodeSSH 让你前端也能玩转部署:从求人到自主的逆袭之路!
前端
app1e23421 分钟前
ctfshow web入门 命令执行(29-77)
android·前端
wordbaby23 分钟前
AbortController 详解:如何优雅地取消异步操作
前端
程序员爱钓鱼24 分钟前
从零开始开发一个简易的五子棋游戏:使用 HTML、CSS 和 JavaScript 实现双人对战
前端·javascript·游戏开发
林太白26 分钟前
NestJS企业级登录注册如何做
前端·javascript·后端
cong_29 分钟前
🔥 我的开源项目火了!竟被各个公众号转发
前端·后端·github
五号厂房35 分钟前
React 中如何使用自定义Hook封装可复用逻辑
前端
icefiresong2435 分钟前
使用 Node.js 和 Git 自动化部署项目
前端
码云之上37 分钟前
聊聊MCP Client及其实践
前端·架构·mcp
dasseinzumtode38 分钟前
ECharts 保留 tooltip.trigger: 'axis'的情况下 实现markPoint tooltip独立自定义悬浮框 功能
前端·echarts