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>
相关推荐
红树林078 分钟前
BeautifulSoup 的页面中需要获取某个元素的 xpath 路径
前端·python·网络爬虫·beautifulsoup
三小河35 分钟前
教你发布一个npm的组织包
前端
用户61204149221343 分钟前
使用JSP+Servlet+JavaBean做的课程后台管理系统
java·javascript·mysql
青椒a1 小时前
002.nestjs后台管理项目-数据库之prisma(上)
前端
米诺zuo1 小时前
react 中的useContext和Provider实践
前端·react.js
AnalogElectronic1 小时前
vue3 实现贪吃蛇手机版01
开发语言·javascript·ecmascript
asdfsdgss1 小时前
Angular CDK 自适应布局技巧:响应式工具实操手册
前端·javascript·angular.js
袁煦丞1 小时前
【私人导航员+内网穿透神器】Sun-Panel × cpolar让NAS变身你的数字管家:cpolar内网穿透实验室第564个成功挑战
前端·程序员·远程工作
爱吃的强哥1 小时前
Electron_Vue3 自定义系统托盘及退出二次确认
前端·javascript·electron
袁煦丞1 小时前
开启SSH后,你的NAS竟成私有云“变形金刚”:cpolar内网穿透实验室第645个成功挑战
前端·程序员·远程工作