vue3前端开发,前后端分离开发必备axios的基础配置案例

vue3前端开发,前后端分离开发必备axios的基础配置案例!为了便于统一管理数据业务的接口调用。我们还是需要考虑使用插件。axios就是一个这样的方便大家统一管理业务数据接口调用的模块。


第一步,需要先安装插件包

npm i axios

如图所示,使用这个命令即可快速安装。

如图,安装完成后,配置参数里多出来一个选项。

第二步,你需要提前准备好一些基础的配置文件。

我们把它存放在utils(一些工具类文件包)我们新建一个http.js

复制代码
//axios基础的封装
import axios from "axios";

const httpInstance = axios.create({
    baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    timeout:5000
})
//axios请求拦截器
httpInstance.interceptors.request.use(
    config =>{
        return config
    },e => Promise.reject(e)
)
//axios响应拦截器
httpInstance.interceptors.response.use(
    res => res.data,
    e =>{
        return Promise.reject(e)
    }
)
export default httpInstance

以上内容就是代码的基础情况。

里面有2个拦截器。可以在后期我们需要用到的时候,再做详细的配置。暂时先这样放入进来。

我们调用了官方提供的函数,对外暴漏了一个实例对象。httpInstance。

在其他的我们需要用到接口调用的时候,引入这个对象就可以了。

也可以使用结构的方式引入。


第三步,我们测试一下这个封装好的配置文件,能不能正常使用。

复制代码
import httpInstance from '@/utils/http'

export function getCategory(){
   return httpInstance({
        url:'home/category/head'
    })
}

如图代码,我们在apis文件夹下面新建了一个testAPI.js文件内容非常简单。

加上export的好处是,我们在组件内想使用这个方法,就直接可以 按照结构的模式直接引入了。

复制代码
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
//测试接口函数
import {getCategory} from '@/apis/testAPI'
getCategory().then(res =>{
    console.log(res);
})
const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

如图所示,我们在main.js里面做了一个测试。可以看见,我们确实是用了解构的模式引入了我们刚刚自定义的一个方法。

看看控制台能不能拿到远程接口回传给我们的分类数据吧。


如图所示,确实拿到了远程接口回传过来的分类信息数据了。证明我们的配置成功了。

相关推荐
星哥说事2 分钟前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家30 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在34 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi1 小时前
Dokploy安装和部署项目流程
运维·前端
普通网友1 小时前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢1 小时前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
随风飞翔的胖子1 小时前
js-cookie详细介绍及在vue3中的使用方法
vue.js·浏览器
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法