为什么要二次封装axios

先了解一下axios是什么？

是一个基于promise的可用在浏览器和node.js中的异步通信框架，主要作用是实现AJAX异步通信；在我们做Vue开发时，vue明确界限就是处理Dom事件，不具备异步通信功能，所以就需要Axios来进行前端异步请求的第三方库

所以当我们用到axios来请求数据时

1、我们会进行二次封装来进行一些，我们自己需要做的事情

//对于axios二次封装

import axios from "axios";



//1.理由axios对象的方法create，去创建一个axios实例

//2：requests就是axios，只不过稍微配置一下

const requests = axios.create({

    //配置对象

    //基础路径，发请求时直接自带api

    baseURL:/api,

    //请求超时的时间5s

    timeout:5000

})



//请求拦截器：在发送请求之前，请求拦截器可以检测到，可以在请求发出前做一些事

requests.interceptors.request.use((config)=>{

    //config:配置对象，对象里面有一个属性很重要，headers请求头

    return config

})



//响应拦截器

requests.interceptors.response.use((res)=>{

    //响应成功的回调函数：服务器响应数据回来后，响应拦截器可以检测到并做一些事情

    return res.data;

},(error)=>{

    //响应失败的回调函数

    return Promise.reject(new Error(faile));

})



//暴露requests

export default requests;

2、在小型项目中，我们完全在组件的生命周期函数中发送请求，但当项目越来越大时，接口几十上百个时，一旦我们需要修改接口地址时，就只能挨个挨个查找并修改，所以我们就需要统一管理接口地址（api）

//当前这个模块：API进行统一管理

import requests from "./request";



//模拟axios发送请求

//三级联动接口

// 地址/api/product/getBaseCategoryList get请求 无参数

export const reqCategoryList = ()=>{

    requests({

        //request中已经配置了基础路径，自带api

        url:/product/getBaseCategoryList,

        method:get

    })

}

测试前：这里直接请求会出现一个跨域问题，因为在咱们前台本地服务器上没有我们请求的接口，应该在我们的config.js文件中配置代理跨域，此处不做详细介绍

可了解

//在入口文件中进行测试

import {reqCategoryList} from @/api

reqCategoryList()

以上文档仅作为个人练习，加强记忆