axios的基础配置

1. 下载axios

2. 创建utils工具包，定义一个请求工具.js 例如http.js

// axios基础的封装
import axios from 'axios'
const httpInstance = axios.create({
    //设置基础地址
    baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    //设置过期时间5秒
    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

3. 创建api包，请求接口的js都在这里。例如创建HttpTest.js文件

import httpInstance from '@/utils/http.js'

//测试用数据
 export function getCategory(){
     return httpInstance({
         url: '/home/category/head',
     })
 }

4.若这时项目刚搭建完想要测试，可去main.js文件下面测试

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/HttpTest.js";

getCategory().then(res=>{
    console.log(res)
})
const app = createApp(App)

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

app.mount('#app')