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里面做了一个测试。可以看见,我们确实是用了解构的模式引入了我们刚刚自定义的一个方法。

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


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

相关推荐
Dragon Wu6 分钟前
TailwindCss 总结
前端·css·前端框架
bpmf_fff15 分钟前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
计算机学姐18 分钟前
基于SSM的宠物领养平台
java·vue.js·spring·maven·intellij-idea·mybatis·宠物
泰山小张只吃荷园28 分钟前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器
工业互联网专业1 小时前
Python毕业设计选题:基于django+vue的期货交易模拟系统的设计与实现
vue.js·python·django·毕业设计·源码·课程设计
悦涵仙子1 小时前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
萧萧玉树1 小时前
分布式在线评测系统
前端·c++·后端·负载均衡
NightCyberpunk1 小时前
Ajax与Vue初步学习
vue.js·学习·ajax
haima951 小时前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐2 小时前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全