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

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

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