fecth封装

fecth API :https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

 

fetch是全局量window的一个方法，

　　第一个参数为URL

　　第二个参数一个可以控制不同配置的 init 对象

无论返回结果如何 , 都视为成功resolve, 只有断网的情况下才是失败reject　

如何判断请求成功: 

　　1.根据官方文档资料得知,  需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true　

　　2.通过response.status , 判断请求失败

 

　　3.也可以通过  window.navigator.onLine 判断是否断网 

 

对fecth封装:

 

//封装fecth
import qs from 'qs'
import url from './url.js'
/*
 * 根据环境变量进行接口区分
 */
let baseURL = '';
let baseURLArr = [{
    type: 'development',
    url: url.BASEURL
}, {
    type: 'test',
    url: 'http://XXXX'
}, {
    type: 'production',
    url: 'http://XXXX'
}];
baseURLArr.forEach(item => {
    if (process.env.NODE_ENV === item.type) {
        baseURL = item.url;
    }
})
export default function request(url, options = {}) {
    url = baseURL + url;
    /*
     * GET 系列请求的处理
     * 正常请求 request(url,{
     * params:{
     *      method:'get'
     *  }
     * })
     */
    !options.method ? options.method = 'GET' : null;
    if (options.params) { //options.hasOwnProperty('params') 会爆
        if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)) {
            const ask = url.includes('?') ? '&' : '?';
            url += `${ask}${qs.stringify(options.params)}`;
        }
        delete options.params; //应为fetch中没有params,所以用完后赢移除
    }
    /*
     * 合并配置项
     */
    options = Object.assign({
        //允许跨域携带资源凭证 same-origin 同源可以 omit都拒绝
        credentials: 'include', //不管同源不同元都可以携带资源凭证
        //设置请求头
        headers: {}
    }, options);
    options.headers.Accept = 'application/json';
    options.headers['Content-Type'] = '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 => {
        if (!/^(2|3)\d$/.test(response.status)) {
            switch (response.status) {
                case 401: //当前请求需要用户验证（一般是未登录）
                    break;
                case 403: //服务器已经理解请求，但是拒绝执行他（一般是TOKEN过期）
                    localStorage.removeItem('token');
                    //跳转的登录页面
                    break;
                case 404: //请求失败，请求所希望的到的资源未被在服务器上发现
                    break;
            }
        }
        return response.json()
    }).catch(error => {
        if (!window.navigator.onLine) {
            //网络断开了，可以让其跳转到断网页面
            return;
        }
        return Promise.reject(error);
    })
}

 

如何用:

//get请求 
request(url.getUrl, {   
        params: {
          password: 123456,
          userName: "admin",
        },
      });

//post请求 
request(url.loginUrl, {
        method: "POST",
        body: {
          password: 123456,
          userName: "admin",
        },
      });

..