008-vue之對ajax請求介面封裝(axios+jsonp)
阿新 • • 發佈:2019-01-24
/** * 此檔案對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) : ''; }