008-vue之对ajax请求接口封装(axios+jsonp)

原创 2018年04月16日 11:16:45
/**
 * 此文件对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) : '';
}

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liguanjie8/article/details/79958184

ajax简单封装

今天对Ajax进行了封装,只要调用一个函数就可以实现get
  • kankan231
  • kankan231
  • 2014-07-05 10:53:54
  • 2393

vue 组件的封装之基于axios的ajax请求

import Vue from 'vue' let service = { url: 'http://host.xxxxx.com/xxx.php' } service.ajaxReuqest...
  • scorpio_h
  • scorpio_h
  • 2017-05-11 17:15:10
  • 914

ajax请求封装,以及异常封装

var __ajaxcount = 0; var __topwin = window.top; var __$jq = __topwin.$; var __istop = (window == win...
  • zhuguominglove
  • zhuguominglove
  • 2015-05-20 18:25:32
  • 566

微信小程序-封装http请求(ajax)

官方api发起请求: wx.request进行封装:要进行一些公共处理,比如添加处理拦截等等 在app.js中声明url前缀 url: '请求ip地址',声明ajax方法 ...
  • qq_26744901
  • qq_26744901
  • 2017-05-17 18:38:05
  • 1764

基于axios的ajax请求封装

import axios from 'axios' // 默认请求配置 let defaultConfig = { method: 'GET', baseURL: process.env.B...
  • scorpio_h
  • scorpio_h
  • 2018-02-27 16:40:40
  • 70

封装ajax请求

  • 2012年05月04日 22:56
  • 2KB
  • 下载

jQuery对AJAX操作的封装

jQuery对AJAX操作的封装1.jQuery对AJAX操作的封装——load() (‘…′).load(url,[data],[fn])异步加载指定URL返回的数据(必需是text/html)...
  • amihui
  • amihui
  • 2015-11-20 00:00:33
  • 1865

jQuery对AJAX的封装——$.ajax

php
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016-04-11 22:59:50
  • 267

js 实现对ajax请求面向对象的封装

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。         ...
  • andywuchuanlong
  • andywuchuanlong
  • 2014-05-13 15:37:50
  • 2566

jquery Ajax 全局调用封装

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....})写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端...
  • xllily_11
  • xllily_11
  • 2016-06-02 15:03:09
  • 18739
收藏助手
不良信息举报
您举报文章:008-vue之对ajax请求接口封装(axios+jsonp)
举报原因:
原因补充:

(最多只允许输入30个字)