个人管理前端制作(2)-集成及其封装axios

个人管理前端制作

安装axios

cnpm install axios

封装 axios

import axios from 'axios';
import qs from 'qs';

const successCode = 0;

// 创建axios实例
const service = axios.create({
    baseURL: '', 
    timeout: 5000, // 请求超时时间
});

// request拦截器
service.interceptors.request.use(config => {
    return config
}, error => {
    // Do something with request error
    console.log(error); // for debug
    Promise.reject(error)
});

// respone拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        // if the custom code is not 20000, it is judged as an error.
        if (res.code !== successCode) {
            return Promise.reject(new Error(res.msg || 'Error'))
        } else {
            return res
        }
    },
    error => {
        console.log('err' + error);// for debug
        return Promise.reject(error)
    });

export default service

/**
 * get 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        service
            .get(url, {
                params: params
            })
            .then(response => {
                resolve(response)
            })
            .catch(err => {
                reject(err)
            })
    })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        service.post(url, qs.stringify(data)).then(
            response => {
                // console.log(response.data.code)
                resolve(response)
            },
            err => {
                reject(err)
            }
        )
    })
}