前端axios的封装

最近公司让我创建一个前端项目，我说好嘛、可以嘛；记录下在创建项目中对axios的封装。

一、安装需要用的插件

/** 这里我使用的是npm安装 */

// 安装本次的主角axios
npm install axios

// 安装封装axios需要用到的小工具
npm install qs

二、封装 - 话不多说，上代码

/**
 * 配置请求
 */
// 导入模块
import axios from 'axios';
import qs from 'qs';

// URL地址
import { BASE_URL } from './config.js';

// 超时时间（ms）
axios.defaults.timeout = 5000 * 1000;


// 默认 axios 请求头
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.headers.post['Content-Type'] = 'application/json';


/**
 * 配置请求的参数处理、以及请求拦截
 */
axios.interceptors.request.use(function (config) {
	// 设置token
	config.headers['token'] = localStorage.getItem('token') || '';

    // 转换JSON
    config.paramsSerializer = function (params) {
        return qs.stringify(params, { indices: false });
    };

    return config;
}, function (error) {
    // 请求错误做的一些操作
    return Promise.reject(error);
});


/**
 * 配置请求的响应处理
 */
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            // 判断登陆是否过期
            if ("这里是判断token是否过期") {
                // 根据需求进行一些操作...
 
                return Promise.reject(response.data);
            }

			// 一般来说后端会返回一个code 通过这个code做出相应的操作
			if(response.data.code === "这里是成功的code值") {
				 return Promise.resolve(response.data.body);
			}
			else {
				return Promise.reject(response.data);
			}
        }
        else {
            return Promise.reject(response.data);
        }
    },
    error => {
        return Promise.reject(error.data);
    }
);


/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(BASE_URL + url + "?" + qs.stringify(params)).then(res => {
            resolve(res);
        })
        .catch(error => {
            reject(error);
        });
    });
}

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(BASE_URL + url, params).then(res => {
            resolve(res);
        })
        .catch(error => {
            reject(error)
        });
    });
}

/**
 * put方法，对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function put(url, params) {
    return new Promise((resolve, reject) => {
        axios.put(baseURl + url, params).then(res => {
            resolve(res);
        })
        .catch(error => {
            reject(error)
        });
    });
}

/**
 * delete方法，对应delete请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function _delete(url, params) {
    return new Promise((resolve, reject) => {
		axios.delete(baseURl + url + "?" + qs.stringify(params)).then(res => {
            resolve(res);
        })
        .catch(error => {
            reject(error)
        });
    });
}

// 导出配置好的对象
export default {
    get,
    post,
	put,
	_delete,
};

三、使用

/** 一般接口会专门找一个或者多个js文件存放 */

/** 存放接口的js文件 - 主要代码 */

// 引入刚刚封装的请求
const request = require('地址');

// 导出之后 按需引入就可以了
// 一般来说get和post请求就足够了，目前在工作中很少用到其他请求方式
module.exports = {
	test: data => request.get('接口的路径', data),  
	test: data => request.post('接口的路径', data),  
	test: data => request.put('/接口的路径', data),  
	test: data => request._delete('接口的路径', data),  
};