原生http請求封裝

 

滿血復活，今天開始開始更新博客。
隨着es6的廣泛應用，promise屬性也隨之用之廣泛，咱們在一些項目中，爲了不引入一些http庫，節省空間，就簡單將原生http請求作了封裝處理，封裝代碼以下：
（其中應用到了fetch，不懂得同窗能夠去mdn瞭解一下）

import http from './http';

let Http = {

    /**
     * @example
     * ```js
     * Http.get('http://xxx.com/some_api', {
     *         headers: 'Instance of Header',
     *         mode: '請求模式 cors、 no-cors 或者 same-origin',
     * })```
     * 
     * @param {String} url
     * @param {Object} opt
     */
    get(url, opt) {
        opt = opt || {};
        opt.method = 'GET';
        return fetch(url, opt);
    },

    /**
     * 
     * @example
     * ```js
     * Http.post('http://xxx.com/some_api', {  
     *         headers: 'Instance of Header',  
     *         mode: '請求模式 cors、 no-cors 或者 same-origin',  
     *         body: '字符串 查詢字符串 FormData實例 Blob 或者 BufferSource(2進制數組)'  
     * })```
     * @param {String} url
     * @param {String | URLSearchParams | FormData | Blob | ArrayBuffer} data
     * @param {Object} opt
     */
    post(url, data, opt) {
        opt = opt || {};
        opt.method = 'POST';
        let param;
        if (data instanceof FormData || data instanceof URLSearchParams || typeof(data) === 'string') {
            param = data;
        } else {
            param = new URLSearchParams();
            for (let k in data) {
                param.append(k, data[k]);
            }
        }
        opt.body = param;
        return fetch(url, opt);
    },

    /**
     * @example 
     * ```js
     * Http.upload('http://xxx.com/some_api', {
     *     progress: (loaded, total)=>{
     *         console.log(loaded, total);
     *        }
     * })```
     * 
     * 
     * @param {String} url
     * @param {FormData | Blob | ArrayBuffer} data
     * @param {Object} opt 
     */
upload(url, data, opt) {
        return new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.onprogress = opt.progress;
            xhr.onerror = reject;
            xhr.timeout = reject;
            xhr.onload = function(evt) {
                resolve({ body: evt.target.response, ok: evt.target.status >= 200 && evt.target.status < 300 });
            };
            xhr.send(data);
        });
    },

    /**
     * @example 
     * ```js
     * Http.download('http://xxx.com/some_api', {
     *     type: 'arraybuffer',
     *     progress: (loaded, total)=>{
     *         console.log(loaded, total);
     *        }
     * })```
     * 
     * 
     * @param {String} url 
     * @param {Object} opt 
     */
 download(url, opt) {
        return new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = opt.type || '';

            xhr.onprogress = opt.progress;
            xhr.onerror = reject;
            xhr.timeout = reject;
            xhr.onload = function(evt) {
                resolve({ body: evt.target.response, ok: evt.target.status >= 200 && evt.target.status < 300 });
            };
            xhr.send(null);
        });
    }
};

export default Http;