vue-element-admin如何二次封装axios

项目目录结构：

├── build # 构建相关

├── mock # 项目mock 模拟数据

├── public # 静态资源

│ │── favicon.ico # favicon图标

│ └── index.html # html模板

├── src # 源代码

│ ├── api # 后端交互

│ ├── assets # 主题 字体等静态资源

│ ├── components # 全局公用组件

│ ├── icons # 项目所有 svg icons

│ ├── layout # 全局框架组件

│ ├── router # 路由

│ ├── store # 全局 状态管理 vuex

│ ├── styles # 全局样式

│ ├── utils # 全局公用方法

│ ├── vendor # 公用vendor

│ ├── views # views 所有页面

│ ├── App.vue # 入口页面

│ ├── main.js # 入口文件 加载组件 初始化等

│ └── permission.js # 权限管理

│ └── settings.js # 配置文件

├── tests # 测试

├── .env.development # 开发环境变量配置

├── .env.production # 生产环境变量配置

├── .eslintrc.js # eslint 配置项

├── .babel.config.js # babel-loader 配置Babel 使用 AST 把不兼容的代码编译成 ES15 版本，因为大多数浏览器都支持这个版本的 JavaScript 代码。

├── .travis.yml # 自动化CI配置

├── vue.config.js # vue-cli 配置

├── postcss.config.js # postcss 配置 vue移动端自适应

├── jest.config.js # Jest 前端测试框架配置

├── jsconfig.json # 提高在写项目时舒适度的。

├── package-lock.json # package-lock.json将这个范围精确到具体版本。主要是为了解决在各个环境中得到确定的node_modules

└── package.json # package.json

1）新建一个untils文件夹或者建一个api文件夹

此处是在untils文件夹下的request.js文件中：

导入下载好的axios

import axios from "axios";

1.利用axios对象的方法create,去创建一个axios实例

2.requests就是axios,只不过稍微配置一下

const requests = axios.create({
 baseURL:'/api',            //基础路径，发请求的时候，路径当中会出现api，不用你手写
 withCredentials: true,     // 跨域请求时发送cookie
 timeout:5000               //请求时间超过5秒
});

请求拦截器:在发请求之前，请求拦截器可以检测到,可以在请求发出去之前做一些事情

 requests.interceptors.request.use((config)=>{
   //config是个配置对象，对象里面有一个属性很重要，headers请求头
   return config;
 });

响应拦截器：包含两个函数（一个是成功返回的函数，一个是失败的返回的函数）

 requests.interceptors.response.use((res)=>{
 //成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情。
 return res.data;
},(erroe)=>{
 return promise.reject(new Error('error'))
});
export default requests;           //对外暴露requests(axios的二次封装)

2）创建一个xxx.js，此处为api/user.js下的示例：

import request from '@/utils/request'  //导入上个封装的axios

//此处示例个登录登出

1.//登录       （推荐此写法）
export const login = (data) => request({
  url: '/vue-element-admin/user/login',       //url地址
  method: 'post',                             //请求方式
  data: data                              //(一般post请求，我们习惯使用 data属性来传参)
//params: data                            //(一般get请求，我们习惯使用params属性来传参）
})
2.//登出  （也可以写成这样 return request这样的 要是有参数直接在method下写参数就行）
export const logout = () => {
  return request({
    url: '/vue-element-admin/user/logout',
    method: 'post'
    //data
  })
}

3.简洁版：

由于常用的ajax请求方法有get、post、put等方法。axios对应的也有很多类型的方法。

为了简化我们的代码，可以对其进行一个简单的封装。

若在（1）中对get和post进行了封装，也就是在（1）中添加了如下代码（添在"export default requests;"前面）

//get方法
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
//post方法
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

则登录可以写成：

export const login = (data) => request.post('/vue-element-admin/user/login', data)

3）最后组件中引入时直接import xxx为自定义的接口名字 此处地址为当前项目的方法存放地址

import xxx from '@/api/user.js'