第七章 封装axios模块

对axios进行二次封装，让项目各个组件能够复用请求，让代码变得更容易维护。

封装要点
1. 统一url配置
2. 从一api请求
3. request拦截器
4. responese拦截器
5. 结合vuex做全局loading动画，或者错误处理
6. 将axios封装成vue插件使用

文件结构
1. config.js axios默认配置，包含基础路径等信息
2. axios.js 二次封装axios模块，包含拦截器等信息
3. api.js 请求接口汇总模块，聚合所有模块api
4. index.js 将axios封装成插件，按插件方式引入
5. modeules 用户管理，菜单管理等子模块api

一、在src下建立http文件夹，用于放在交互api代码

1）http/config.js

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

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

2）http/api.js

import * as login from './modules/login'
import * as user from './modules/user'
import * as dept from './modules/dept'
import * as role from './modules/role'
import * as menu from './modules/menu'
import * as dict from './modules/dict'
import * as config from './modules/config'
import * as log from './modules/log'
import * as loginlog from './modules/loginlog'

export default {
    login, user, dept, role, menu, dict, config, log, loginlog
}

3）http/axios.js

import axios from 'axios';
import config from './config';
import Cookies from 'js-cookie';
import router from '@/router'

export default function $axios(options){
    return new Promise((resolve,reject)=>{
        const instance = axios.create({
            baseURL:config.baseUrl,
            headers:config.headers,
            timeout:config.timeout,
            withCredentials:config.withCredentials
        })
        
        //request  请求拦截器
        instance.interceptors.request.use(
            config=>{
                let token = Cookies.get('token');
                if(token){
                    config.headers.token = token
                }else{
                    router.push('/login')
                }
                return config
            },
            error =>{
                return Promise.reject(error)
            }
        )

        //response 响应拦截器
        instance.interceptors.response.use(
            response =>{
                return response.data
            },
            error =>{
                return Promise.reject(err)
            }
        )

        instance(options).then(res =>{
            resolve(res)
            return false
        }).catch(error =>{
            resolve(error)
        })

    })
}

4）http/index.js

import api from './api'

const install = Vue =>{
    if(install.installed)
     return;
     install.installed = true;
     Object.defineProperties(Vue.prototype,{
         $api:{
             get(){
                 return api
             }
         }
     })
}
export default install

5）http/modules/user.js

import axios from '../axios'

/*用户管理模块 */

//保存
export const save = (data) =>{
    return axios({url:'/user/save',method:'post',data})
}

//删除
export const batchDelete = (data) =>{
    return axios({url:'/user/delete',method:'post',data})
}

//分页查询
export const findPage = (data) =>{
    return axios({url:'/user/findPage',method:'post',data})
}

//查找用户的菜单权限标识集合
export const findPermissions = (params) =>{
    return axios({url:'/user/findPermissions',method:'get',params})
}

5）src/main.js

import api from './http'
import global from '@/utils/global'

Vue.use(api)
Vue.prototype.global = global

二、安装js-cookie

cnpm i js-cookie --save

用来Cookie获取token

结语

到此为止封装完毕