vue3+ts+vite中封装axios,使用方法从0到1

一、安装axios

javascript 复制代码
npm install axios @types/axios --save

二、配置代理vite.config.ts,如果没有需要新建该文件

javascript 复制代码
module.exports = {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 设置代理目标
        changeOrigin: true, // 是否改变请求源地址
        rewrite: (path) => path.replace(/^\/api/, '') // 将 /api 替换为空字符串
      }
    }
  }
};

三、新建utils文件夹,在utils文件夹下新建http.ts文件和methods.ts,如图:


http.ts文件内容:

javascript 复制代码
import axios from 'axios';
import type  { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';

// 创建axios实例
const instance = axios.create({
   baseURL: '/api', // 设置API的基础URL
});

// 请求拦截器
instance.interceptors.request.use(
   (config: AxiosRequestConfig):any => {
      // 可在请求发送前对config进行修改,如添加请求头等
      const headers = config.headers || {};
      headers['Authorization'] = 'Bxxx';
      config.headers = headers;
      return config;
   },
   (error: AxiosError) => {
      // 处理请求错误
      return Promise.reject(error);
   }
);

// 响应拦截器
instance.interceptors.response.use(
   (response: AxiosResponse) => {
      // 对响应数据进行处理
      return response;
   },
   (error: AxiosError) => {
      // 处理响应错误
      return Promise.reject(error);
   }
);


export default instance

methods.ts文件内容:

javascript 复制代码
import instance from './http'

// 封装GET请求
export function get<T>(url: string, params?: any): Promise<T> {
   return instance.get<T>(url, { params })
      .then(response => response.data)
      .catch(error => {
         throw error;
      });
}

// 封装POST请求
export function post<T>(url: string, data?: any): Promise<T> {
   return instance.post<T>(url, data)
      .then(response => response.data)
      .catch(error => {
         throw error;
      });
}

// put
export function put<T>(url: string, data?: any): Promise<T> {
   return instance.put<T>(url, data)
      .then(response => response.data)
      .catch(error => {
         throw error;
      });
}
//delete
export function del<T>(url: string): Promise<T> {
   return instance.delete<T>(url)
      .then(response => response.data)
      .catch(error => {
         throw error;
      });
}

四、新建api文件夹,用于存放接口 结构如下

api/user.ts 用户相关接口

javascript 复制代码
import { get } from '@/utils/methods'
import type { UserRequest } from '../types/user.d'

export  function userRequest(params: UserRequest) {
   return get('/users', { params }); //测试接口
}

types/user.d.ts定义接口ts类型

javascript 复制代码
export interface UserRequest{
   pageNum?:number,
   pageSize?:number,
}

五、在vue文件中使用

javascript 复制代码
<script setup lang="ts">
// 导出指定模块
import useStore from '@/store'
import { onMounted } from 'vue'
import { userRequest } from '@/apis/api/user'
const { user } = useStore()
// 获取
user.getUserList()

onMounted(() => {
  userRequest({}).then((res: any) => {
    console.log('res: ', res)
  })
})
</script>

请求成功测试

相关推荐
fruge几秒前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia9 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫10 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
十一吖i28 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年29 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_30 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891132 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾34 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking34 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu36 分钟前
前端 Canvas 绘画 总结
前端