fetch 二次封装

发布日期:2020-09-07 阅读量:1213

1. 安装所需依赖

    npm i qs -S

2. 引入所需依赖

    import qs from 'qs'

3. 根据(生产、测试、研发)环境,设置baseUrl

    let baseUrl = ''
    if (env == 'production') {
        baseUrl = 'https://www.littlegao.com/';
    } else if (env === 'test') {
        baseUrl = 'http://test.littlegao.com/';
    } else {
        baseUrl = 'http://localhost:3000/';
    }

4. 请求主题封装

    export default function request(url, options = {}) {
        url = baseUrl + url;
        // 没有指定请求方式则默认GET请求
        !options.method ? options.method = 'GET': null
        if (options.hasOwnProperty('params')) { //如果存在get请求的参数params
            if (/^(GET|DELETE/HEAD/OPTIONS)$/i.test(options.method)) { // 如果是这些请求方式
                const ask = url.includes('?')? '&': '?';
                url = ask + qs.stringifty(options.params);
            }
            delete options.params;
        }
        //合并配置
        options = Object.assign({
            // 是否允许携带凭证,include允许,same-origin 同源允许,omit拒绝
            credentials: 'include',
            // 设置请求头
            headers: {}
        }, options);
        // 凭证验证
        const token = localStorage.getItem('token');
        token && options.headers.Authorization = token;
        
        // 处理post请求
        if (/^(POST|PUT)/.test(options.method)) {
            !options.type? options.type = 'urlencoded': null;
            if (options.type === 'urlencoded') {
                options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
                options.body = qs.stringify(options.body)
            }
            if (options.type === 'json') {
                options.headers['Content-Type'] = 'application/json';
                options.body = qs.stringify(options.body)
            }
        }
        return fetch(url, options).then(response => {
            if(/^(2|3)d{2}$/.test(response.status)) {
                switch(response.status) {
                    case 401: // 认证未通过,未登录
                        break;
                    case 403: // 已请求,但服务器拒绝(一般是token过期)
                        break;
                    case 404: // 请求的资源未找到
                        break;
                    ...
                    default: 
                        break;
                }
                return Promise.reject(response);
            }
            return response.json();
        }).catch(error => {
            if(!window.navigator.onLine) {
                return;
            }
            Promise.reject(error);
        })
    }