vue3 封装aixos

1. Vue3 封装 aixos 并且 使用 aixos 请求数据

bash 复制代码
npm install axios
# 或者
yarn add axios

2. Vue3 封装 aixos 并且 使用 aixos 请求数据

封装 axios可以帮助我们更好地管理 HTTP 请求,例如添加统一的基础URL请求头拦截器等功能。

下面是封装 axios的一个示例,以及如何在 Vite 项目中使用它来请求数据。

1.1. 创建 Axios 实例

首先,创建一个新的 JavaScript 文件,比如 http.jsaxiosInstance.js,并在其中配置 Axios 实例:

javascript 复制代码
// src/http.js

import axios from 'axios';

// 创建一个新的 axios 实例
const service = axios.create({
  baseURL: 'https://api.example.com', // 设置基础 URL
  timeout: 5000, // 设置超时时间
  headers: { 'Content-Type': 'application/json' } //设置默认的Content-Type
});

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    // 在这里可以设置请求头、请求参数等return config
    // 例如添加 token 到请求头
    const token = localStorage.getItem('token'); // 示例:从本地存储获取 token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    console.log(error)
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    // return response.data; // 返回实际的数据而不是整个响应对象
    // 在这里处理返回数据
    const { data } = response
    if (data.code !== 200) {
      // 对响应code做点什么
      if (data.code === 401) {
        // 处理未授权的情况
        // 可能需要重定向到登录页面或者其他操作
      }
      console.error('Error:', data.message)
      return Promise.reject(newError(data.message || 'Error'))
    } else {
      return data
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error);
  }
);

export const get = (url, params) => {
  return service.get(url, { params });
};

export const post = (url, data) => {
  return service.post(url, data);
};

export const put = (url, data) => {
  return service.put(url, data);
};

export const delete= (url, data) => {
  return service.delete(url, data);
};

export default service;

1.2. 使用封装后的 Axios

接下来,在你的 Vue 组件或其他地方使用这个封装好的 Axios 实例:

javascript 复制代码
// src/views/MyComponent.vue

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <pre>{{ data }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import service from '@/http'; // 引入封装好的 axios 实例

const data = ref('');
async function fetchData() {
  try {
    const response = await axiosInstance.get('/endpoint'); // 替换为你的 API 端点
    data.value = response;
  } catch (error) {
    console.error("Failed to fetch data:", error);
  }
}
</script>

在这个例子中,我们在 MyComponent.vue 中定义了一个按钮,点击后会触发 fetchData 方法,该方法通过封装好的 Axios 实例发起请求,并将返回的数据展示出来。

1.3. 注意事项

通过这种方式,你可以方便地管理和复用 HTTP 请求代码,并且可以根据需要轻松地添加额外的功能,如身份验证和错误处理。

相关推荐
Jammingpro3 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05156 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI9 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front10 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie10 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀10 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻10 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树11 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔11 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城11 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app