1. axios二次封装

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

请求拦截器：可以在发送请求之前处理一些事情；
响应拦截器：当服务器返回数据以后可以处理一些事情；

在src/api下创建requests.js文件（请求网络数据）：

// 对axios进行二次封装
import axios from 'axios'

// 1. 利用axios对象的方法create，去创建一个axios案例
// 2. requests就是axios
const requests = axios.create({
    // 配置对象
    baseURL: "/api", //基础路径，发送请求的时候，路径当中会出现api
    timeout: 5000,   //请求超时的时间5s
})

// 请求拦截器：在发送请求之前，请求拦截器可以检测到，在请求发送之前处理一些事情
requests.interceptors.request.use((config) => {
    // config: 是配置对象，该对象包含一个属性-->headers请求头
    return config
})
// 响应拦截器：
requests.interceptors.response.use((res) => {
    // 成功的回调函数
    return res.data
}, (error) => {
    // 失败的回调函数
    return Promise.reject(new Error('faile'))
})

// 对外暴露
export default requests

2. 接口统一管理

项目较小：请求次数很少时，可以在组件的生命周期函数中发请求
项目较大：axios.get(‘xxx’)

在/src/api文件夹下，创建index.js文件，对请求接口进行统一管理：

// 当前文件是对API进行统一管理
import requests from './request'

// 首页三级联动接口
// /api/product/getBaseCategoryList     get     无参数
// 发请求: axios发请求返回结果Promise对象
// 对外暴露一个函数，只要外部调用这个函数，就会向服务器发起ajax请求、获取三级菜单数据；该函数返回  服务器返回的结果
export const reqCategoryList = () => requests({ url: '/product/getBaseCategoryList', method: 'get' })

3. 跨域

什么是跨域？

当前发起请求的域和该请求指向的资源所在的域不一致。
具体表现在协议、域名、端口号——均一致为同域,有一个不同就是跨域

解决？
该项目中：
http://localhost:8080/#/home —前端项目本地服务器
http://39.98.123.211 —后台服务器
在根目录下，创建vue.config.js:

module.exports = {
    // 关闭eslint
    lintOnSave:false,
    // 代理跨域
    devServer: {
        proxy: {
            '/api': {
                target:'http://39.98.123.211',
                // pathRewrite: {'^/api':''},
            }
        }
    }
}

4. api接口如何使用？

在main.js文件中

import { reqCategoryList } from '@/api'
reqCategoryList()