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',
  });
};
相关推荐
yvvvy2 分钟前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn3 分钟前
Cropper.js:JS图像裁剪库
前端·javascript
Serendipity2615 分钟前
微服务架构
前端·微服务
Hilaku20 分钟前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明23 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
Danny_FD36 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip41 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济1 小时前
后端程序员的CSS复习
前端
Enddme1 小时前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员1 小时前
微信小程序使用 Tailwind CSS version 3
前端