二次封装axios接口

1. 安装axios             npm install axios --save

2.在utils里面建一个request.js文件夹，在里面写上下列代码，就对请求完成了封装

import axios from 'axios';
import router from "../router"; //用到了路由跳转
import { Message } from 'element-ui'; //用到了message组件

// 将axios.create创建实例（好处是如果有多台服务器，多个URL地址，我们就可以创建多个实例）
const service = axios.create({
    // process.env.NODE_ENV === 'development'       来判断是否开发环境
    baseURL: '请求根地址', 
    timeout: 5000,
    // 请求头
    headers: {
        'Content-Type': 'application/json',
        'Accept-Language': 'zh-CN'
    },
});

// 请求拦截器
service.interceptors.request.use(
    // 请求成功
    config => {
        const token = localStorage.getItem('ZNUTOKEN');
        if (token) {
            // 将token做为请求头
            config.headers['AdminToken'] = token;
        }
        return config;
    },
    // 请求失败
    error => {
        console.log(error);
        return Promise.reject();
    }
);

// 响应拦截器
service.interceptors.response.use(
    // 响应成功
    response => {
        // 如果返回200
        if (response.status === 200) {
            // 如果返回401
            if (response.data.code == 401) {
                // 跳转到登录页面
                router.push('/login');
                // 展示的信息
                Message({
                    // 设为true,那么message就会当作html片段
                    dangerouslyUseHTMLString: true,
                    // 返回过来的错误信息
                    message: response.data.msg,
                    type: 'error',
                    duration: 5000,
                });
            } else {
                // 返回的数据
                return response.data;
            }
        } else {
            // 返回一个带有拒绝原因的 Promise 对象。
            Promise.reject();
        }
    },
    // 响应失败
    error => {
        console.log(error);
        // 返回一个带有拒绝原因的 Promise 对象。
        return Promise.reject();
    }
);

export default service;

3.接下来就是将每个接口利用封装的请求前缀，请求头和拦截器进行二次封装，一般在api文件夹里面建一个index.js文件

有几点需要注意的：

1.   get请求用params做参数

2.   post请求用data做参数

3.   export表示导出这个数据

4.   url 里面的地址是接在前缀后面的地址

// 导入之前封装的request
import request from '../utils/request';

// 表格里面的数据(echarts)
export const fetchData = query => {
    return request({
        url: './table.json',
        method: 'get',
        params: query
    });
};
//登录
export function login(data) {
    return request({
        url: '/admin/login',
        method: 'post',
        data: data,
    });
}
//退出登录
export function logout(data) {
    return request({
        url: '/admin/logout',
        method: 'post',
        data: data,
    });
}
//用户列表
export function userList(params) {
    return request({
        url: '/user/list',
        method: 'get',
        params: params,
    });
}
//用户详细
export function userInfo(params) {
    return request({
        url: '/user/info',
        method: 'get',
        params: params,
    });
}

4.我们怎么样将这些接口用到页面里面去呢！，我们一般用import来引入要用的接口

<script>
import { userDele, userList } from '../api/index'
export default {

5.这样就完成了对接口的二次封装，这样做可以让我们换根地址更方便，假如axios不再进行维护，我们也可以换掉axios，这只是最简单的二次封装。