vue3 axios二次封装(js,ts两个版本)

  1. 使用请求拦截器,可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

  2. 使用响应拦截器,可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

1 先安装使用

npm install axios

js版本

2  新建一个文件夹 

// axios 二次封装,使用响应和请求拦截器
import axios from 'axios'
import { ElMessage } from 'element-plus'
import {useTokenStore} from "@/stores/token.js";
import router from '@/router/index.js'
// 一,使用create方法,创建axios实例(配置:基础路径,超时时间)
let instance= axios.create({
  // 基础路径 会携带/api前缀 相当于当前源拼接 baseURL 
  // 如果当前源是 5173,那么拼接后完整路径就是 http://localhost:5173/api
  // baseURL = '/api';  
  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 3中,可以使用axios来进行网络请求的封装。首先,在根目录上新建一个api文件夹,并在其中创建axios.js和httpHelper.js两个文件。引用中的axios.js文件用于初始化axios实例。其中,你需要安装axiosvue-axios两个依赖。通过axios.create()方法创建axios实例,并设置一些配置,比如超时时间等。然后,在请求拦截器中,你可以对请求进行一些处理,比如添加请求头等。在响应拦截器中,你可以对响应进行一些处理,比如获取响应数据等。最后,导出axios实例供其他地方使用。 接下来,在httpHelper.js文件中,你可以封装各种请求方法,比如get方法和post方法。在get方法中,你可以设置一些请求头和请求参数,并使用axios实例发送get请求。在成功回调中,你可以处理响应数据。如果请求失败,你也可以处理错误情况。最后,将封装好的请求方法导出供其他地方使用。 当你需要在页面中调用接口时,可以导入httpHelper,并使用其提供的方法进行请求。比如在Vue 3的页面上,你可以使用<script setup>标签导入httpHelper,并调用其中的get方法来获取接口数据。 通过以上步骤,你就可以在Vue 3中封装axios,并使用它来进行网络请求了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【vue3】 axios封装使用(js/ts)](https://blog.csdn.net/zxsy19966/article/details/127686261)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值