【Vue 基础】尚品汇项目-04-axios二次封装

为什么需要进行二次封装axios?

        请求拦截器：可以在发请求之前处理一些业务

        响应拦截器：当服务器数据返回以后，可以处理一些事情

新建“src/api/request.js”

 添加如下代码

// 对于axios进行二次封装
import axios from "axios"

// 1. 利用axios对象的方法create，去创建一个axios实例
export const requests = axios.create({
    //配置对象
    baseURL:"http://gmall-h5-api.atguigu.cn/api",  //基础路径，发请求的时候路径当中总会出现api
    timeout:5000,  //请求超时时间为5s
})

//请求拦截器：在发请求之前，请求拦截器可以检测到，因此可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{  //config是配置对象，里面的headers请求头非常重要
    return config
})

//响应拦截器
requests.interceptors.response.use(
    (res)=>{  // 服务器成功响应的回调函数，响应拦截器可以检测到，可以做一些事情
        return res.data
    },
    (error)=>{  //服务器响应失败的回调函数
        console.log(error)
        return Promise.reject(new Error('faile'))
    }
)

// 对外暴露

新建“src/api/index.js”

添加如下代码

//当前这个模块：对API进行统一管理
import {requests} from './request'

//三级联动接口  get  无参数
export const reqCategoryList = ()=>{
    // 发请求：axios发请求返回结果Promise对象
    return requests({url:'/product/getBaseCategoryList', method:'get'})
}

测试一下是否请求成功：

 请求成功可以在控制台看到返回的数据