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) : '';
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值