1. 程式人生 > >008-vue之對ajax請求介面封裝(axios+jsonp)

008-vue之對ajax請求介面封裝(axios+jsonp)

/**
 * 此檔案對axios 於 json請求伺服器進行了封裝
 * https://github.com/axios/axios
 * https://github.com/webmodules/jsonp
 */
import axios from 'axios';
import originJsonp from 'jsonp';

let my_axios_fn = axios.create({
    baseURL: "http://www.jsjie.top",
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    withCredentials: false
});


/**
 * axios二次封裝(使用方法與axios的物件呼叫模式一致)
 * @param obj
 * @returns {Promise}
 *
 */
export function my_axios( obj ) {
    let ajax_url = obj['url'];
    let ajax_method = obj['method'];
    let ajax_data = obj['data'] ? obj['data'] : '';
    if(typeof ajax_data != 'string'){
        ajax_data = form_json(obj['data']);
    }
    if(ajax_url && ajax_method){
        return new Promise((resolve, reject) => {
            my_axios_fn({
                url: ajax_url,
                method: ajax_method,
                data: ajax_data
            }).then((res) => {
                let self = this;
                let data = res.data;
                if(data.status){
                    resolve(data);
                }else {
                    reject.call(self,data)
                }
            }).catch(function(err){
                console.error('觸發了.catch()請查詢原因',err);
            })
        })
    }else {
        console.error("url和method引數為必填項");
    }
}


/**
 * 對JSONP進行二次封裝
 * url  =>  www.xxx.com
 * data =>  鍵值對
 * option =>
 */
export function jsonp(url, data, option) {
    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data);
    console.info('jsonp',url);
    return new Promise((resolve, reject) => {
        originJsonp(url, option, (err, data) => {
            if (!err) {
                resolve(data)
            } else {
                reject(err)
            }
        })
    })
}


/**
 * POST資料序列化
 * @param json
 * @returns {Array}
 */
export function form_json(json) {
    if(json){
        let attr = [];
        for(let item of Object.entries(json)){
            if(item[1]){
                attr.push( item.join("=") );
            }
        }
        attr = attr.join("&");
        return attr;
    }
}


/**
 * 拼接url方法
 * @param data
 * @returns {string}
 */
export function param(data) {
    let url = '';
    for (var k in data) {
        let value = data[k] !== undefined ? data[k] : '';
        url += '&' + k + '=' + encodeURIComponent(value);
    }
    return url ? url.substring(1) : '';
}