axios二次封装实战

首先是axios的基础封装：所有的请求都会拼接这个baseURL,另外简单设置了请求、响应拦截器。

javascript 复制代码

//axios基础封装
import axios from "axios"

//创建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

然后是api调用层，实际上是将不同业务的请求地址与baseurl进行拼接。

javascript 复制代码

import httpInstance from "@/utils/http";

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

最后是调用api接口的返回结果，返回的是一个promise对象。用then进行接收。

javascript 复制代码

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')

逐步梳理数据返回的整个流程：

Axios实例创建 (http.js)
javascript 复制代码
```
const httpInstance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})
```
- 这里创建了一个预配置的axios实例，所有通过该实例的请求都会自动拼接这个baseURL
- 比如后续的/home/category/head请求，实际完整URL会是http://pcapi.../home/category/head
响应拦截器 (http.js关键部分)
javascript 复制代码
```
httpInstance.interceptors.response.use(res => res.data, ...)
```
- 这里的关键是将响应数据直接返回res.data
- 这意味着任何通过这个实例的请求，最终得到的都是响应体的data部分
API调用层 (testAPI.js)
javascript 复制代码
```
export function getCategory(){
  return httpInstance({
    url:'home/category/head'
  })
}
```
- 调用时实际是发起一个GET请求到/home/category/head
- 返回的是一个Promise对象
应用初始化调用 (main.js)
javascript 复制代码
```
import { getCategory } from '@/apis/testAPI'
getCategory().then(res => {
  console.log(res)
})
```
- 在Vue应用初始化前直接调用接口
- 当请求成功时，响应结果会经过拦截器处理后进入then回调
- 这里的res已经是响应拦截器返回的res.data

完整数据流 ：浏览器发起请求 → 服务端响应 → axios接收响应 → 响应拦截器处理(res.data) → testAPI.js的Promise → main.js中的then回调

关键点解释：

拦截器中的res => res.data帮我们自动解构了axios的响应对象
实际业务中获取的响应数据会比原生axios少一层结构
main.js中的调用是立即执行的，会在应用初始化前就发起请求

示例响应过程：假设服务端返回：

json 复制代码

{
  "status": 200,
  "data": {
    "categories": [...]
  }
}

经过拦截器处理后，最终得到的res就是：

json 复制代码

{
  "categories": [...]
}

这种封装方式让业务层的代码更简洁，不需要每次处理响应数据结构，同时统一管理了基础配置和错误处理。