jQuery进阶：用最优雅的方式写ajax请求

zzir 发布于2019-08-21 11:39 / 1278人阅读

摘要：优点与扩展优点类似与的回调方式优点增加一个接口只是需要增加一个配置文件，很方便扩展当前的的我只写了，有兴趣可以扩展其他的数据类型缺点没有对函数参数进行校验

或许你也可以试试：xfire: 简单优雅、高度可配置的fetch接口批量生成工具

首先需要一个配置文件

var api = {
    basePath: "http://192.168.200.226:58080",
    pathList: [
        {
            name: "agentHeartBeat",
            path:"/api/csta/agent/heartbeat/{{agentId}}/{{type}}/{{something}}",
            method:"get"
        },
        {
            name: "setAgentState",
            path: "/api/csta/agent/state",
            method: "post"
        },
        {
            name: "getAgents",
            path: "/user/agent/{{query}}",
            method: "get"
        }
    ]
}

然后需要一个方法，把配置文件生成接口

function WellApi(Config){
var headers = {};
var Api = function(){};

Api.pt = Api.prototype;

var util = {
    ajax: function(url, method, payload) {
        return $.ajax({
            url: url,
            type: method || "get",
            data: JSON.stringify(payload),
            headers: headers,
            dataType: "json",
            contentType: "application/json; charset=UTF-8"
        });
    },

    /**
     * [render 模板渲染]
     * 主要用于将 /users/{{userId}} 和{userId: "89898"}转换成/users/89898，和mastache语法差不多，
     * 当然我们没必要为了这么小的一个功能来引入一个模板库
     * query字符串可以当做一个参数传递进来
     * 例如： /users/{{query}}和{query:"?name=jisika&sex=1"}
     * @Author   Wdd
     * @DateTime 2017-03-13T19:42:58+0800
     * @param    {[type]} tpl [description]
     * @param    {[type]} data [description]
     * @return   {[type]} [description]
     */
    render: function(tpl, data){
        var re = /{{([^}]+)?}}/;
        var match = "";

        while(match = re.exec(tpl)){
            tpl = tpl.replace(match[0],data[match[1]]);
        }

        return tpl;
    }
};

/**
 * [setHeader 暴露设置头部信息的方法]
 * 有些方法需要特定的头部信息，例如登录之后才能获取sesssionId,然后访问所有的接口时，必须携带sessionId
 * 才可以访问
 * @Author   Wdd
 * @DateTime 2017-03-13T10:34:03+0800
 * @param    {[type]} headers [description]
 */
Api.pt.setHeader = function(headers){
    headers = headers;
};

/**
 * [fire 发送ajax请求，this会绑定到每个接口上]
 * @Author   Wdd
 * @DateTime 2017-03-13T19:42:13+0800
 * @param    {[type]} pathParm [description]
 * @param    {[type]} payload [description]
 * @return   {[type]} [description]
 */
function fire(pathParm, payload){
    var url = util.render(this.path, pathParm);
    return util.ajax(url, this.method, payload);
}


/**
 * [for 遍历所有接口]
 * @Author   Wdd
 * @DateTime 2017-03-13T19:49:33+0800
 * @param    {[type]} var i [description]
 * @return   {[type]} [description]
 */
for(var i=0; i < Config.pathList.length; i++){

    Api.pt[Config.pathList[i].name] = {
        path: Config.basePath + Config.pathList[i].path,
        method: Config.pathList[i].method,
        fire: fire
    };
}

return new Api();
}

试用一下

注意点

fire(pathParm, payload)中的pathParm是最终会被渲染到请求的路径里面，而paylaod代表请求体。

例如：

// 路径这么写
/api/{{version}}/agent/{{id}}/{{somethingElse}}

// pathParm这样写
{version: 1, id: "2", somethingElse: "sss"}

// 最终路径会被渲染成
/api/1/agent/2/sss

path里面不仅仅可放一个变量的，具体可以参考mustache语法，上面代码里的render是以最简单的实现。

优点与扩展

[优点]：类似与promise的回调方式

[优点]：增加一个接口只是需要增加一个配置文件，很方便

[扩展]：当前的ajax 的contentType我只写了json，有兴趣可以扩展其他的数据类型

[缺点]：没有对函数参数进行校验

私有云海外云主机 jquery发送ajax请求 jQuery监控ajax请求 jquery_ajax请求 jquery_ajax异步请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86966.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
jquery ajax请求参数和返回数据的处理

摘要：处理返回数据，渲染到页面上去。之前的做法也是和上面一模一样的吧，返回的数据是数据格式的，然后分别取值赋值给页面元素，所以代码往往是这样的。如果有什么更好的方案，请指教，谢谢另外摘记一个表单输入框中回车自动提交的情况和处理方案刚接触学会用jQuery ajax的时候，觉得真东西好神奇，这样就可以把数据取回来了啊。然后我可以把取回来的数据渲染到页面上，一颗赛艇。之前很早接触到项目，并不知...

2bdenny 2019-08-19 17:40 评论0 收藏0
前端基础进阶（十三）：透彻掌握Promise的使用，读这篇就够了

摘要：在对象的构造函数中，将一个函数作为第一个参数。二对象中的方法，可以接收构造函数中处理的状态变化，并分别对应执行。 showImg(https://segmentfault.com/img/remote/1460000008932857); Promise的重要性我认为我没有必要多讲，概括起来说就是必须得掌握，而且还要掌握透彻。这篇文章的开头，主要跟大家分析一下，为什么会有Promise...

yy736044583 2019-08-21 18:31 评论0 收藏0