ES6语法编写常用工具utils类

1、创建Config类,用户存储一些全局变量

class Config {
    constructor() {
        this.BASE_URL = 'http://www.baidu.com'
        this.IMAGE_URL = 'http://www.cdn.baidu.com'
        this.SITE_PREFIX = 'ZP_'
        this.AJAX_CONFIG = {
            timeout: 10000,
            headers: {},
            auth: {},
        }
        this.AJAX_CODE_MESSAGE = {
            200: "服务器成功返回请求的数据。",
            201: "新建或修改数据成功。",
            202: "一个请求已经进入后台排队(异步任务)。",
            204: "删除数据成功。",
            400: "发出的请求有错误,服务器没有进行新建或修改数据的操作。",
            401: "用户没有权限(令牌、用户名、密码错误)。",
            403: "用户得到授权,但是访问是被禁止的。",
            404: "发出的请求针对的是不存在的记录,服务器没有进行操作。",
            406: "请求的格式不可得。",
            410: "请求的资源被永久删除,且不会再得到的。",
            422: "当创建一个对象时,发生一个验证错误。",
            500: "服务器发生错误,请检查服务器。",
            502: "网关错误。",
            503: "服务不可用,服务器暂时过载或维护。",
            504: "网关超时。",
        }
        
    }

}
const CONFIG = new Config()
export {
    Config,
    CONFIG,
}

2、创建Utils类

import { Config } from './config';
import axios from 'axios';
class Utils extends Config {
    constructor(props) {
        super(props)
        this.ajax = null
        this.ajaxInit()
    }

    ajaxInit() {
        this.ajax = axios.create({
            ...this.AJAX_CONFIG
        })
        this.ajax.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            return config
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error)
        })
        this.ajax.interceptors.response.use(function (response) {
            // 对响应数据做点什么
            if (!response) {
                console.log("您的网络发生异常,无法连接服务器")
            }
            return response;
        }, function (error) {
            // 对响应错误做点什么
            const response = error.response
            const status = response.status
            if (status === 401) {
                console.log(this.AJAX_CODE_MESSAGE[status])
            } else if (status >= 400 && status < 500) {
                console.log(this.AJAX_CODE_MESSAGE[status])
            } else if (status >= 500) {
                console.log(this.AJAX_CODE_MESSAGE[status])
            }
            return Promise.reject(error)
        })
    }

    setToken(token) {
        localStorage.setItem(this.SITE_PREFIX + 'token', token)
        return null
    }

    getToken() {
        return localStorage.getItem(this.SITE_PREFIX + 'token')
    }

    setUserInfo(user) {
        localStorage.setItem(this.SITE_PREFIX + 'user', user)
        return null
    }

    getUserInfo() {
        return localStorage.getItem(this.SITE_PREFIX + 'user')
    }

}
export default new Utils()

不喜勿喷,十分感谢。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章