vue3+vite+js axios引用

先交代下基础版本:
"node":"V16.14.1" "vue": "^3.4.21" "vite": "^5.2.0"

  1. 安装:npm install axios --save

  2. 在src目录下的utils 文件夹创建一个request.js文件(示例代码,仅供参考):

    //引入axios请求
    import axios from 'axios'
    // store
    import useUserStore from '@/store/modules/userStore.js'
    const store = useUserStore()
    const BASE_API=import.meta.env.VITE_APP_BASE_API
    // 创建axios实例
    const service = axios.create({
    baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)
    timeout: 15000 // 请求超时时间,这里15秒
    //withCredentials: true,// 异步请求携带cookie,true为携带,false为不携带
    //请求头里面设置通用传参类型
    /headers: {
    //设置后端需要的传参类型
    'Content-Type': 'application/json',
    'token': 'x-auth-token',//一开始就要token
    'X-Requested-With': 'XMLHttpRequest',
    }
    /
    })

    // request拦截器
    service.interceptors.request.use(config => {
    const value = JSON.parse(localStorage.getItem('token'));
    console.log(111, value.token)
    if (store.token) {
    config.headers['token'] = store.token // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
    }, error => {
    console.log(error)
    return Promise.reject(error)
    })

    // response拦截器
    service.interceptors.response.use(
    response => {
    //对数据返回做什么
    const res = response.data
    const config = response.config
    // custom 表示自定义
    if (res.status_code !== 200 && !config.custom) {
    // if (res.status_code === 1002) {
    // loginOut()
    // } else if (loginVerify(res, config)) { // 登录功能验证
    // return res
    // } else {
    // Message({
    // message: res.status || 'Error',
    // type: 'error',
    // duration: 5 * 1000
    // })
    // }
    return Promise.reject(new Error(res.status || 'Error'))
    } else {
    if (response.headers['authorization'] || response.headers['Authorization']) {
    const _token = response.headers['authorization'] || response.headers['Authorization']
    store.dispatch('user/setToken', _token.split('Bearer ')[1])
    }
    return res
    }
    },
    error => {
    console.log('err' + error) // for debug
    // Message({
    // message: error.message,
    // type: 'error',
    // duration: 5 * 1000
    // })
    return Promise.reject(error)
    }
    )
    export default service

  3. src 目录下创建一个api斜体样式文件夹,用来存放每个模块的接口请求,类如login.js

    import request from '@/utils/request'

    //示例以application/json格式传参
    export function login(data) {
    return request({
    url: '/admin/login',
    method: 'post',
    data: data
    })
    }

    //示例在url后面拼接参数传参
    export function test(params) {
    return request({
    url: '/admin/login',
    method: 'post',
    params: params
    })
    }

  4. 使用,类如HelloWorld.vue:

    <script setup> import { login } from '@/api/login.js' onMounted(() => { login({ phone: 18888888888 }).then(res => { console.log(res) }).catch(res => { console.log(res) }) }) </script>
相关推荐
AliPaPa7 分钟前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
parade岁月18 分钟前
nuxt和vite使用环境比变量对比
前端·vite·nuxt.js
小帆聊前端20 分钟前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript
Harriet嘉39 分钟前
解决Chrome 140以上版本“此扩展程序不再受支持,因此已停用”问题 axure插件安装问题
前端·chrome
FuckPatience44 分钟前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
Kingsdesigner1 小时前
从平面到“货架”:Illustrator与Substance Stager的包装设计可视化工作流
前端·平面·illustrator·设计师·substance 3d·平面设计·产品渲染
一枚前端小能手1 小时前
🔍 那些不为人知但是好用的JS小秘密
前端·javascript
屿小夏1 小时前
JSAR 开发环境配置与项目初始化全流程指南
前端
微辣而已1 小时前
next.js中实现缓存
前端
北城以北88881 小时前
Vue-- Axios 交互(二)
javascript·vue.js·交互