vite学习教程04、vue集成axios封装request工具类及应用

文章目录

前言

博主介绍:✌目前全网粉丝3W+,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java后端技术领域。

涵盖技术内容:Java后端、大数据、算法、分布式微服务、中间件、前端、运维等。

博主所有博客文件目录索引:博客目录索引(持续更新)

视频平台:b站-Coder长路


1、安装axios

shell 复制代码
npm install axios

2、封装request工具类

在src目录下创建请求脚本文件:request.js

js 复制代码
import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 5000
})

// request 拦截器
service.interceptors.request.use(
  config => {
    // 在这里可以设置请求头、请求参数等return config
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    // 在这里处理返回数据const { data } = response
    if (response.data.code !== 200) {
      console.error('Error:', data.message)
      return Promise.reject(newError(data.message || 'Error'))
    } else {
      return response.data
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)
export default service;import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 5000
})

// request 拦截器
service.interceptors.request.use(
  config => {
    // 在这里可以设置请求头、请求参数等return config
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    // 在这里处理返回数据const { data } = response
    if (response.data.code !== 200) {
      console.error('Error:', data.message)
      return Promise.reject(newError(data.message || 'Error'))
    } else {
      return response.data
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)
export default service;

3、封装api请求工具

不同的请求方式直接修改method即可:get、post、delete

js 复制代码
import request from '@/utils/request'

// 查询团队成员
export function queryTeamMembers() {
    return request({
        url: '/api/open/user/teamMembers',
        method: 'get'
    })
}

4、实战:vue中使用api请求工具类

js 复制代码
import { queryTeamMembers } from '@/api/openSiteApi'

created() {
  queryTeamMembers().then((data)=>{
      console.log(data)
  }).catch(err=>console.log(err))
}

构建运行下,成功访问请求:


资料获取

大家点赞、收藏、关注、评论啦~

精彩专栏推荐订阅:在下方专栏👇🏻

更多博客与资料可查看👇🏻获取联系方式👇🏻,🍅文末获取开发资源及更多资源博客获取🍅

相关推荐
天水幼麟4 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
天水幼麟6 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
沧海一笑-dj7 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
大苏打seven8 小时前
Docker学习笔记:Docker网络
笔记·学习·docker