简单的Element UI前端框架-封装axios

接着前一篇内容：https://blog.csdn.net/wwyywwsaber/article/details/123925017

要点：

• 统一url配置
• 统一api请求
• request拦截器
• response拦截器
• 将axios封装成vue插件使用

文件结构：

在src目录下，新建一个http文件夹，用来存放http交互api代码

• config.js：axios默认配置，包含基础路径等信息
• axios.js：二次封装axios模块，包含拦截器等信息
• api.js：请求接口汇总模块，聚合所有模块API
• index.js：将axios封装成插件，按插件方式引入
• modules：用户管理、菜单管理等子模块API  

 

 

由于需要用到cookie，安装js-cookie依赖

cnpm install js-cookie

将src/components/HelloWorld.vue改为home.vue

在src目录下新建utils文件夹，创建global.js文件

//global.js代码
export const baseUrl = 'http://127.0.0.1:80'

export const backupBaseUrl = 'http://localhost:8002'

export default{
  baseUrl, backupBaseUrl
}

在src/http目录下创建config.js文件

import {baseUrl} from '@/utils/global'

export default{
  method: 'get',
  baseUrl: baseUrl,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {},
  timeout: 1000,
  withCredentials: true,
  responseType: 'json'
}

 在src/http目录下创建axios.js文件

import axios from 'axios'
import config from './config'
import Cookies f