Vue企业级项目开发axios

axios二次封装

复制代码
import axios from 'axios'
导入element-plus的信息弹窗
imort {elMessage} from 'element-plus'

//利用axios的create方法创建实例,配置默认请求头和请求超时时间
const request = axios.create({
    url:'/api',可以使用已经配置好的环境变量import.meta.env.VITE_APP_BASE_API
    timeout:4000,
})

//配置axios的请求拦截器和响应拦截器
request.interceptors.request((config)=>{
//可以利用config配置请求头
    return config
})
//配置axios响应拦截器
request.interceptors.response((response)=>{
//简化响应数据
return response.data
},(error)=>{
  //配置错误返回,导入element-plus的信息弹窗
    let message=''
    let status=error.response.status
    switch(){
    case 401:
        message = 'token过期'
        break
      case 403:
        message = '没有权限'
        break
      case 404:
        message = '请求地址错误'
        break
      case 500:
        message = '服务器问题'
        break
      default:
        message = '网络错误'
        break
}
elMessage({
type: 'error',
      message,
})
return Promise.reject(error)
})

//向外暴露
export default request

使用

复制代码
import request from 'request.ts'
import {onMounted} from 'vue'
onMounted(()=>{
    request({
    url:'/user/login',
    method:'post',
    data:{
    username:''
    password:''
}
}).then((res)=>{
cl(res)
})
})

API接口统一管理

src/api/user/index.ts

复制代码
// 引入二次封装的axios
import request from '@/utils/request'
// 引入ts接口
import type { loginForm, loginResponseData, userResponseData } from './type'
// 统一管理API URL的枚举
enum API {
  LOGIN_URL = '/user/login',
  USERINFO_URL = '/user/info',
}
//暴露请求函数
//登录接口
export const reLogin = (data: loginForm) =>
  request.post<any, loginResponseData>(API.LOGIN_URL, data)
//获取用户信息
export const reUserInfo = () =>
  request.get<any, userResponseData>(API.USERINFO_URL)

配置当前文件下的type接口

复制代码
//登录请求接口数据
export interface loginForm {
  username: string
  password: string
}
interface dataType {
  token: string
}
//登录返回接口数据
export interface loginResponseData {
  code: number
  data: dataType
}
//用户信息接口数据
interface userinfo {
  userId: number
  avatar: string
  username: string
  password: string
  desc: string
  roles: string[]
  buttons: string[]
  routes: string[]
  token: string
}
interface user {
  checkUser: userinfo
}
export interface userResponseData {
  code: number
  data: user
}

使用

复制代码
imp {reLogin} from 'api/user/index'

reLogin({username:'',password:''}).then((res)=>{ cl(res)})

配置路由初始化........

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui