超简洁axios封装

92 阅读1分钟

面向自己的axios封装,啥时候想起来再扩展

axios封装

import axios from 'axios';

const service = axios.create({
    baseURL: process.env.VUE_API_BASE_URL || "/product",
    //请求头
    headers: {
        'Content-Type': process.env.VUE_APP_API_CONTENT_TYPE || 'application/json'
    },
    timeout: 60000, //超时时间
})

//请求拦截器
axios.interceptors.request.use(
    config=>{
        return config,
    }
    error => {
        console.log(error);
        return Promise.reject(error);
    }
})

// 响应拦截器
service.interceptors.response.use({
    response=>{
        let res = response.data;
        if (res.code === 0 || res.code === 10000) {
            return res.data;
        } else if (res.code === -1){
            message.error('操作失败')
            return Promise.reject(res.code);
        } else {
            let errorInfo = res.message ? ('message' + res.message) || ('code' + res.code);
            message.error(errorInfo);
        }
    }
    error=>{
        return Promise.reject(error);
    }
})

export default service;

axios底层

class Axios {
    constructor() {
    }
 
    request(config) {
        return new Promise(resolve => {
            const {url = '', method = 'get', data = {} } = config;
            // 发送ajax请求
            const xhr = new XMLHttpRequest();
            xhr.open(method, url, true);
            xhr.onload = function() {
                console.log(xhr.responseText)
                resolve(xhr.responseText);
            }
            xhr.send(data);
        })
    }
}