axios二次封装（含跨域）及api统一管理

axios二次封装

// 对axios进行二次封装
import axios from "axios";
const requsets=axios.create({
    // 基础路径自动添加
    baseURL:"/api",
    // 请求5秒超时自动取消
    timeout:5000
})
// 请求拦截器
requsets.interceptors.request.use((config)=>{
    // headers请求头
    return config;
})
requsets.interceptors.response.use((res)=>{
    // 成功的回调函数，服务器返回数据回来后，相应拦截器检测到，可修改
    return res.data;
})
export default requsets;

跨域解决

在Vue.config.js里添加

devServer: {
    proxy: {
      '/api': {//匹配以api开头的路径
        target: 'http://gmall-h5-api.atguigu.cn', //目标基础路径
      },
    },
  },

项目小可选择在每个组件中单独写

大型项目可在同级中创建index.js进行统一管理

import requests from "./requests";
export const reqCategoryList = () => requests({
    url: '/product/getBaseCategoryList',//路径
    method: 'get'//请求方式
});
// 引用方式import {reqCategoryList} from '@/api'