fetch请求封装

fetch请求封装

import qs from 'qs';
/**
 * 根据环境变量进行接口区分
 */
let baseURL = '';
let baseURLArr = [
    {
        type:'development', //  本地环境
        url:'http://127.0.0.1:9000'
    },
    {
        type:'test', // 测试环境
        url:'http://127.0.0.1:9000'
    },
    {
        type:'production', // 生产环境
        url:'http://127.0.0.1:9000'
    }
];
baseURLArr.forEach(item=>{
    if(process.env.NODE_ENV === ITEM_RENDER_EVT.type){
        baseURL = item.url;
    }
})

export default function request(url,options={}){
    url = baseURL + url;
    /**
     * GET 系列请求的处理
     */
    !options.method ? options.method = 'GET' : null;
    if(options.hasOwnProperty('params')){
        if(/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)){
            const ask = url.includes('?') ? '&' : '?';
            url += `${ask}${qs.stringify(params)}`;
        }
        delete options.params;
    }

    /**
     * 合并配置项
     */
    options = Object.assign({
        // 允许跨域携带资源凭证 same-origin同源可以，omit都拒绝
        credentials:'include',
        // 设置请求头
        headers:{}
    },options);
    options.headers.Accept = 'application/json';
    /**
     * token的校验
     */
    const token = localStorage.getItem('token')
    token && (options.headers.Authorization = token);
    
    /**
     * POST 请求的处理
     */
    if(/^(POST|PUT)$/i.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 = JSON.stringify(options.body)
        }
    }
    return fetch(url,options).then(response =>{
        // 返回的结果可能是非200状态码
        if(!/^(2|3)\d{2}$/.test(response.status)){
            switch(response.status){
                case 401: // 当前请求需要用户验证（一般是未登录）
                    break;
                case 403: // 服务器已经理解请求，但是拒绝执行它（一般是token过期）
                    break;
                case 404: // 请求失败，请求所希望得到资源未被在服务器上发现
                    break;
            }
            return Promise.reject(response)
        }
        return response.json();
    }).catch(error => {
        //断网处理
        if(!window.navigator.onLine){
            // 断开网络了，可以让其跳转到断网页面
            return;
        }
        return Promise.reject(error);
    });
}