vue3 学习笔记04 -- axios的使用及封装

vue3 学习笔记04 -- axios的使用及封装

  • 安装 Axios 和 TypeScript 类型定义

    npm install axios
    npm install -D @types/axios

创建一个 Axios 实例并封装成一个可复用的模块,这样可以在整个应用中轻松地进行 API 请求管理。

  • 在 src 目录下创建一个 services 文件夹,并在其中创建 api.ts 文件:
ts 复制代码
  // src/services/api.ts

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

// 创建一个 axios 实例
const api: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 30000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
    // 其他默认请求头可以在这里配置
  }
});

// 请求拦截器
api.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求发送之前做些什么,例如加入 token 等操作
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
api.interceptors.response.use(
  (response: AxiosResponse) => {
    // 在响应数据返回之前做些什么,例如对响应数据进行处理
    return response.data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default api;
ts 复制代码
export default defineConfig({
  plugins: [vue()],

  server:{
    host: '0.0.0.0', // 允许IP访问
    proxy: {
        [env.VITE_APP_BASE_API]: {
          changeOrigin: true,
          target: env.VITE_APP_TARGET_URL,
          secure: false,
          rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), '')
        },
      }
  }
})
  • 使用axios封装

    • 在src/api文件下新建login/login.ts文件

      ts 复制代码
          import api from '@/services/api';
          import { AxiosPromise } from "axios";
          import { LoginData, LoginResult } from "./types";
          export function login(data:LoginData):AxiosPromise<LoginResult> {
              return api({
                  url: '/mock/user/login',
                  method: 'post',
                  data
              })
          }
    • src/login/types.ts

      ts 复制代码
          export interface LoginData {
              /**
              * 用户名
              */
              username: string;
              /**
              * 密码
              */
              password: string;
          }
          export interface userInfoVo {
              id: number
              name: string
              phone: number
          }
          /**
          * 登录响应
          */
          export interface LoginResult {
              /**
              * token
              */
              token?: string;
              /**
              * 过期时间(单位:毫秒)
              */
              expireAt?: number;
              /**
              * 刷新token
              */
              refreshToken?: string;
              /**
              * 用户信息
              */
              userInfo?: userInfoVo[];
          }
  • vue文件中使用

js 复制代码
<template>
 form表单.....
<el-button class="login-button" type="primary" @click="handleLogin" :loading="loading"
        >登录</el-button
      >
</template> 
<script setup lang="ts">
import { login } from '@/api/login/login'
import { useRouter } from 'vue-router'
let loading = ref(false)
const router = useRouter()
const handleLogin = ()=>{
    let data = {
        username:'xxx',
        password:'xxx'
    }
    loading.value = true
    login(data).then((res)=>{
        loading.value = false
        // 一些存储token及其他信息的处理的处理
        ....要干的事
        router.push('/')
    })
}
</script>  
相关推荐
陈洪奇6 小时前
注册中心学习笔记整理
笔记·学习
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
兴趣使然_9 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
aramae11 小时前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio
sunbyte11 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
fen_fen11 小时前
学习笔记(32):matplotlib绘制简单图表-数据分布图
笔记·学习·matplotlib
普宁彭于晏14 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
饕餮争锋15 小时前
设计模式笔记_创建型_建造者模式
笔记·设计模式·建造者模式
萝卜青今天也要开心15 小时前
2025年上半年软件设计师考后分享
笔记·学习
吃货界的硬件攻城狮16 小时前
【STM32 学习笔记】SPI通信协议
笔记·stm32·学习