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

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


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

相关推荐
耶啵奶膘38 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理