微信小程序入门真钱捕鱼:网络请求封装

几日前见到了三个童鞋碰着的难点,今日特意商量了asp.netwebserviceget/post恳求重返json境遇的标题。 asp.netframework3.5webservice增添了检讨content-type,固然须要头设置了content-type:'application/json',就能够回去json字符,并不是xml。 首先大家要询问一下webservice再次回到的json结构。再次来到的json格式是{"d":实际的内容},实际内容据说webservice方法再次来到值来规定。1)假诺是字符串字符,那么实际上内容正是字符串。要是回去的是多少个json格式的字符串,需求注意一下,实际内容不是json对象,具体参谋:jQuery通过调用webservice重回json数据的主题材料2)就算是List对象,那么实际上内容正是三个数组,数组项目包涵的开始和结果据他们说ListT的T来决定。 a)借使T不是指标,普通品种,如string,int,则实在内容为字符串也许数字数组。 b)假若T为类,那么实际上内容为json数组,项目为json对象,属性包涵类定义的国有性质,会还增多二个__type的性质,能够忽视,那个属性值的是webservice的名目和办法,如“"__type":"webservice.test+User"”3)假使是类,那么实际上内容为三个json对象,包涵类定义的国有属性 通过地方能够领会,ext4的JSONStore要选取webservice作为数据源时,须要注意下边4点1)webservice能够回来List类名称那连串型的数目,reader配置的root为d属性,况且增加proxy的headers,扩展"Content-Type":'application/json'央求头以便回到json数据。2)需求注意的是,JSONStore私下认可的倡议方式是get央求,而webservice再次回到json数据必要为post央求或然明显用UseHttpGet=true钦定了,那样本事用get方法央浼,要不会现身错误,参照他事他说加以考察:ajaxwebservice中间试验图动用GET乞请调用方法,但不容许那样做3卡塔尔当配置JSONStore的proxy为post央求时,暗许JSONStore会提交参数limit,page,start3个参数,借使您的webservice方法未有概念那3个参数,会情不自禁{"Message":"无效的JSON基元:page/limit/start。"错误。化解办法正是安顿proxy的limitParam,pageParam,startParam为undefined不发送这3个参数.4)当方法有其它参数时,须要手动调用JSONStore的load方法,增添params配置,无法配置autoLoad,何况无法设置JSONStoreproxy的extraParams,那样会extraParams被ext管理成url格式的键值对,引致参数不许确现身{"Message":"无效的JSON基元:name。",具体看示例里面包车型地铁认证 示例代码如下Ext4JSONStore使用webservice重临的json数据test.asmx

数据(ExtJs Data)

在支付进度中,最要紧的照旧互连网伏乞了,没有链接服务器的app与咸鱼有哪些界别,后天就来介绍下Wechat小程序中的网络诉求api:

usingSystem.Web.Script.Services;usingSystem.Web.Services;usingSystem.Collections.Generic;namespacewebservice{[WebService(Namespace="")][WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)][System.ComponentModel.ToolboxItem(false)][System.Web.Script.Services.ScriptService]publicclasstest:System.Web.Services.WebService{publicclassUser{publicstringId,Name;}[ScriptMethod(ResponseFormat=ResponseFormat.Json),WebMethod(EnableSession=true)]publicListUserUsers(stringname)//参数测试用{ListUserl=newListUser();Useru=newUser();u.Id="1";u.Name="test1";l.Add(u);u=newUser();u.Id="2";u.Name="test2";l.Add(u);u=newUser();u.Id="3";u.Name="test3";l.Add(u);returnl;}}}

Ext.data命名空间

Wechat小程序对网络的必要相当高,首先服务器必需是布局 HTTPS 技巧开展呼吁,而且对于小程序支付必须在开荒者账号中设置域名并且通过TLS版本的检测本领央浼,不过在平凡自身写demo的时候没须求配置,大家只须求在开辟工具中设置:开垦条件下不校验要求域名以致TLS版本。

test.html

至于数据存款和储蓄、读取的类都定义在Ext.data命名空间中。Ext的gridPanel、combobox的数据源都以来自Ext.data提供的类。该命名空间下的类支持数组、Json和xml数据。 

真钱捕鱼 1

!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"""htmlheadmeta"Content-Type"content="text/html;charset=utf-8"/titleExt4JSONStore使用webservice示例/titlelinktype="text/css"rel="Stylesheet"href="resources/css/ext-all.css"/scripttype="text/javascript"src="ext-all.js"/scriptscripttype="text/javascript"Ext.onReady(function(){Ext.define('Student',{extend:'Ext.data.Model',fields:['Id','Name']});varstore=newExt.data.Store({model:'Student',//autoLoad:true,//不能配置成自动加载,如果webservice方法有参数时,需要手动调用load方法并且增加params配置proxy:{type:'ajax',/////////////////////////post请求非常重要,要去掉这些参数limitParam:undefined,pageParam:undefined,startParam:undefined,///////////////////////extraParams:{name:"name"},//有参数时不能配置extraParams,传递的这个值会被编码为name=name,而webservice方法需要的是{name:"name"}这种格式的//extraParams:'{name:"name"}',//这样传递也不行,被编码成“0=%7B1=n2=a3=m4=e5=%3A6=%227=n8=a9=m10=e11=%2212=%7D”,更加离谱,字符中内容全部作为内容了,自动增加从0开始递增的键名称actionMethods:{read:'POST'},headers:{"Content-Type":'application/json'},//webservice返回JSON必备url:'test.asmx/Users',reader:{root:'d',idProperty:'Id'}}});//如果webservice没有参数,可以不用手动调用load方法,直接配置为autoLoadstore.load({params:'{name:"name"}'})//在load中设置webservice需要的参数,为json格式的字符串,这样不会被编码vargridPanel1=Ext.create('Ext.grid.Panel',{title:'学生信息表',store:store,width:500,renderTo:document.body,id:'panel',columnLines:true,columns:[{xtype:'rownumberer',width:20},{text:'学号',dataIndex:'Id',flex:1,editor:{xtype:'textfield'}},{text:'姓名',dataIndex:'Name',flex:1,editor:{xtype:'textfield'}}]});});/script/headbody/body/html

Ext.data.Connection

wx.request

相关随笔推荐Ext4XMLStore加载webservice数据源示例ajaxwebservice中间试验图动用GET乞求调用方法,但不许那样做jQuery通过调用webservice再次回到json数据的标题

此类封装了Ajax,提供比古板Javascript异步传输数据更为轻巧的秘籍,宽容了独具浏览器。它肩负与服务端达成异步交互作用,并把从服务端的多寡转交给Ext.data.Proxy进行拍卖。以下代码成立connection实例,并安排好它的种种参数,使用request向服务器发起呼吁并收到服务端的陈说。

wx.request发起的是 HTTPS 需要。

配置.config  

OBJECT参数表明:

真钱捕鱼 2真钱捕鱼 3

参数名类型必填表达

url : String 
//请求的url。

urlString是开辟者服务器接口地址

extraParams : Object | String 
//乞请传递的参数。假设布署在request方法中,此属性要改为params

dataObject、String否诉求的参数

method : 'GET' | 'POST' 
//恳求的措施。

headerObject否设置央浼的 header , header 中无法设置 Referer

callback : function 
//供给完成后的回调函数,无论是成功如故诉讼失败,都会试行。

methodString否默以为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

success : function(response) 
//必要成功时的回调函数。
//response:服务端的响应流(代表的正是劳务端response对象),通过response.responseText得到服务端传输过来的Json数据

dataTypeString否默以为 json。若是设置了 dataType 为 json,则会尝试对响应的数码做一次 JSON.parse

failure : function(response)
//央求退步时的回调函数
//response:服务端的响应流(代表的便是劳动端response对象),通过response.responseText得到服务端传输过来的Json数据

successFunction否收到开辟者服务成功重返的回调函数,res = {data: '开荒者服务器再次来到的内容'}

scope : Object 
//回调函数的成效域。

failFunction否接口调用失利的回调函数

form : Object | String 
//绑定的form表单。

completeFunction否接口调用结束的回调函数(调用成功、败北都会进行)

isUpload : bool 
//是不是实施文书上传。

data 数据证实最后发送给服务器的数额是 String 类型,假如传入的 data 不是 String 类型,会被转换来 String 。转变法则如下:

headers : Object 
//诉求的头顶新闻。

对于 header['content-type'] 为 'application/json' 的多少,会对数据开展 JSON 体系化

xmlData : Object 
//XML文书档案对象,可透过U福特ExplorerL附加参数的章程倡导号召。

对于 header['content-type'] 为 'application/x-www-form-urlencoded' 的多少,会将数据调换来 query string (encodeUCR-VIComponent=encodeULANDIComponent&encodeULX570IComponent=encodeU凯雷德IComponent

JsonData : Json 
//Json对象,可透过UEvoqueL附加参数的点子倡导号召。

演示代码:

disableCaching : bool 
//是或不是禁止使用缓存,暗许禁用。要是设为true则意味在发送GET情势的央求时, 为诉求链接增多二个不另行的标志参数以禁止使用缓存。

wx.request({

timeout : delay 
//须要超时的飞秒数,暗许30秒。

url: 'test.php', //仅为示范,而不是真实的接口地址

View Code

data: {

方法.method 

x: '' ,

真钱捕鱼 4真钱捕鱼 5

y: ''

request(config)
//发起呼吁并吸收接纳远程反馈,Ext.data.Connection的配备意气风发体可写在request的布置中,分化在于extraParams要改为params。

},

abort([TransactionId])
    
//当同不常间有七个央求产生时,根据钦命的职业id放弃此中的某一个央求。假设不点名职业id,则吐弃最终三个呼吁。
//TransactionId: 事务ID

header: {

isLoading([TransactionId])
//依据业务id判别相应的央浼是还是不是到位。假若未内定事务id,就推断末了三个呼吁是还是不是形成。

'content-type': 'application/json'

View Code

},

示例.example 

success: function {

真钱捕鱼 6真钱捕鱼 7

console.log

Ext.onReady(function () {

}

    var conn = new Ext.data.Connection();
    //发起号召并抽出远程反馈
    conn.request({
        method: 'GET',//必要形式
        timeout: 300,//诉求超时时间
        autoAbort: false,//是还是不是自动断开链接
        disableCaching: false,//是还是不是禁止使用缓存
        //诉求的网站的头顶
        defaultHeaders: { referer: '' },
        //央求的网站
        url: 'AjaxFormHandler.ashx',
        //央求附带的参数
        params: {
            name: 'sam'
        },
        success: function (response) {
            //将长途反馈的Json字符解析为Json对象
            var m = Ext.JSON.decode(response.responseText);
            Ext.Msg.alert('success',m.msg );
        },
        failure: function () {
            Ext.Msg.alert('error', 'http错误');
        }
    });

})

});

tip: content-type 默认为 'application/json'

View Code

tip: 顾客端的 HTTPS TLS 版本为1.2,但Android的片段机型还未有帮衬 TLS 1.2,所以请确认保障 HTTPS 服务器的 TLS 版本帮助1.2及以下版本;

服务端的AjaxFormHandler.ashx: 

tip: 要介怀 method 的 value 必需为大写;

context.Response.ContentType = "text/plain";
var Request = context.Request;
var Response = context.Response;
string name = Request [ "name" ];
if ( name = "sam" ) { Response.Write( "{msg: ' " + name + " ' }" ); }
else { Response.Write( "{ msg: ' 无此客户 ' }" State of Qatar; }

tip: url 中无法有端口;

 

tip: request 的默许超时时间和最大超时时间都以 60s

Ext.data.Model

tip: request 的最大并发数是 5

代表数据模型,可定义字段。此模型与数据库表相关联。要是您要建谈判谐的数据模型,就须要让你的类派生于Ext.data.Model。其new出的实例正是表的一条记下,要是是在多少表格或数量树种,它意味着的就是一条记下。而Ext.data.Record是Ext.data.Model的一个性质。你能够按要求设定Ext.data.Model的字段,无需完全将数据库表的字段都定义在Model中,那要看您从数据库表中查询记录时所再次来到到顾客端的记录中富含了何等字段,没出未来Ext.data.Model字段中的数据,在客商端就荒诞不经。别的,GridPanel的columns假如是设定为从Ext.data.Model中读取记录,那么即便Ext.data.Model定义了有个别字段,但该字段并没出今后GridPanel的columns中,那么GrindPanel就不会显得它,但实质上它还是存在于内部存款和储蓄器中。

tip: 互联网诉求的 referer 是不得以设置的,格式固定为 appid,{version}为小程序的版本号,版本号为 0 表示为开拓版。

创制数据模型 

上少年老成章大家关系了Wechat小程序模块化,因为在档次中网络诉求的次数超多,所以大家得以把网络诉求模块化。

真钱捕鱼 8真钱捕鱼 9

首先大家得以见到此间的网络诉求的api中的代码中变化的习性:

//创造数据模型
Ext.define("employee", {
    extend: "Ext.data.Model",
    fields: [
        { name: "employeeName", type: "string", convert: function (value) { /*……convert是可选用,函数可对字段值做出推断*/ } },
        { name: "age", type: "int", convert: null },
        { name: "gender", type: "int" },
        { name: "IsMarried", type: "boolean", defaultValue: true, convert: null }, //defaultValue是可筛选
        { name: "favit", type: "auto" } //auto类型表示数组,例如服务端重返的json数据的某些属性是多少个数组
    ]
});

url:开垦者服务器接口地址,每一种接口之处都是例外的。

//若是Model的某些字段是意气风发维数组,绑定数据的零器件能够一向显示数组内容,假如是锯齿数组则须要渲染时钦命读取数组的那后生可畏层
var column = [
    {
        text: "喜好",
        dataIndex: "favit",
        renderer: function () {
            return favit[1];
        }
    }
];

data:post央浼的时候顺便的参数。

View Code

method :平日意况下只利用 post 和 get

操作记录 

自个儿在utils文件夹下创设了network.js用来封装小程序的网络央求。

真钱捕鱼 10真钱捕鱼 11

function GetData(url, data, method,success, fail, complete) {

//访谈记录的诀窍有以下三种
user.get("age")
user.data["age"]
user.data.age

console.log("post url:[" + url + ']');

//更正记录的艺术有以下两种
user.set("age", 32);
user.data.age = 32;
user.data["age"] = 32;

wx.request({

//Ext.data.Model不仅仅存款和储蓄了字段的数据,同一时间还会有好多卓绝的数量音讯,所以利用get和set方式访谈或改善记录时方可储存相关音信,比方能够判明字段的值是或不是与前边不相符,不相仿将被视为新值,改革值早前它会将旧值抽取来存入modified属性中以便你有望用得上。而Ext.data.Model的data属性则只存款和储蓄字段的数量,它不存储额外音讯,所以推举使用get和set访问器获取或改过字段。然而data属性自有它的优势,当你须求将记录拷贝黄金时代份时,data具备轻松的表征,这要比直接拷贝xt.data.Model要节约财富得多。

url: url,

View Code

data: data,

方法.method   

method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

真钱捕鱼 12真钱捕鱼 13

header: {

commit()
//提交数据,调用此方式后,会清空modified并将drity设为false。

'content-type': 'application/json'

reject()
//打消校正,把纠正后的数额复苏为modified中积存的值再清空modified并将drity设为false。

},

getChanges()
//获取更改的数量并封装成Json对象回来。
示例:
//管理表单
Ext.get("saveDataBtn").on("click", function () {
    //获取具备数占有被退换过的record
    var c = store.getModifiedRecords();
    var msg = "";
    c.forEach(function (record) {
        //被退换过的字段包装成Json重回
        //转化为Json字符
        var jsonStr=Ext.encode(record.getChanges());
        msg += "<br>" + jsonStr + "<br>";
    });
    Ext.Msg.alert(msg);
})

success: function {

isModified()
//测量检验数据是不是被改善。

success;

copy()
//忽视drity,将记录拷贝黄金年代份,重临与store未有任何关系的Ext.data.Model副本。

},

save()
//使用代理发起REST恳求。服务端会视为那是一个增添记录的伸手。
示例:
//创造一条新记录
var stu2 = new Student({
    id:2,
    name: "korn"
});
stu2.save({
    //那有别于connection.request的success,以下参数中的record实际上=operation.responseText
    success: function (record, operation) {
        serverMsg = Ext.decode(operation.responseText).msg;
        Ext.Msg.alert(serverMsg);
    }
});

fail: function {

View Code

fail;

静态方法.staticMethod 

},

真钱捕鱼 14真钱捕鱼 15

complete: function {

load(id,Json)
//id:远程诉求时,从远程重回数据时,该数额被当做是本土数据模型的实例,你得配置该实例的id
Json:{ 
    scope: 作用域 , 
    failure: function(record, operation) ,    
    success: function(record, operation)                
}

complete;

destore()
//使用代理发起REST央求。服务端会视为那是叁个刨除记录的伏乞。
//示例:
stu.destore({
    success: function (record, operation) {
        serverMsg = Ext.decode(operation.response.responseText);
        Ext.Msg.alert(serverMsg);
    }
});

}

真钱捕鱼,save()
//使用代理发起REST哀告。服务端会视为那是二个校订记录的乞请。

})

View Code

console.log("----end-----post----");

创办模型的代办

}

当先50%景况你恐怕合意在Ext.data.Store中成立代理,但你能够在创立数据模型的还要一贯为其制造贰个代理。 

在动用的时候只须求提供

Ext.define('Student', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'ID', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    proxy: {
        type: 'ajax',
        format: 'ashx',
        url: 'StudentHandler.ashx'
    }
});

var network = require('../../utils/network.js')

返回列表