SharePoint App开发随笔------之Rest API
上一篇App开发随笔中,我使用的是JSOM进行的开发,本次尝试使用REST API,App工程的创建步骤参照上篇文章,本文中主要是比较JS文件中的差异。
1.为了方便尝试实验Rest API,aspx页中添加两个inputText,一个button,第一个inputText中用了输入rest url,第二个inputText输出结果,button用来执行rest url,效果如图
只为实验Rest api不为好看,长得不好看就将就吧。
2.JS文件中的code如下,当点击上图“Execute”这个button时,调用executeRestAPI这个function,和上篇JSOM中的JS里最大的区别就是不在构造Context,而是直接使用拼接url的方式实现我们的需求,url中的内容就是通常我们所了解的rest url。executeRestAPI中需要使用JQuery的getScript来加载“SP.RequestExecutor.js”这个JS文件,加载之后会调用function runRestAPI,该JS中包含runRestAPI function中使用的类SP.RequestExecutor,该类在MSDN中的解释是“Provides an abstract class to issue a Web request to the server and get a response from the server.”,我们简单点理解,就是一个执行页面请求的类,构造好对象后,使用executeAsync异步执行你的request,会发现url中包含上篇文章中用到的一个类SP.AppContextSite,因为下面code的request是要访问host web中的数据,属于cross domain,所以用到它也就很好理解了,request中的success和error是两个回调函数,分别对应成功和失败的情况。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var hostWebUrl; 2 var appWebUrl; 3 4 $(document).ready(function () { 5 var urlParams = getQueryStringParameter(); 6 hostWebUrl = urlParams.SPHostUrl || _spPageContextInfo.webAbsoluteUrl; 7 appWebUrl = urlParams.SPAppWebUrl; 8 }); 9 10 11 function executeRestAPI(restUrl) { 12 13 $.getScript(hostWebUrl + "/_layouts/15/SP.RequestExecutor.js", runRestAPI(restUrl)); 14 } 15 16 function runRestAPI(restUrl) { 17 var executor = new SP.RequestExecutor(appWebUrl); 18 var targetUrl = "?@target='"; 19 if (restUrl.indexOf("?") >= 0) { 20 targetUrl = "&@target='"; 21 } 22 executor.executeAsync({ 23 url: appWebUrl + "/_api/SP.AppContextSite(@target)" + restUrl + targetUrl + hostWebUrl + "'", 24 method: "GET", 25 headers: { "Accept": "application/json; odata=verbose" }, 26 success: successHandler, 27 error: errorHandler 28 }); 29 } 30 31 function successHandler(data) { 32 $("#resultText").val(data.body); 33 } 34 35 function errorHandler(data, errorCode, errorMessage) { 36 alert(JSON.stringify(data)); 37 } 38 39 function getQueryStringParameter() { 40 var params = document.URL.split('?')[1].split('&'); 41 var result = {}; 42 for (var i = 0; i < params.length; i = i + 1) { 43 var pair = params[i].split('='); 44 result[pair[0]] = decodeURIComponent(pair[1] || ''); 45 } 46 return JSON.parse(JSON.stringify(result)); 47 }
3.部署App,在页面中添加webpart,效果如第一步中的图片所示,在第一个textbox中输入url,“/web/webs?$filter=ID%20eq%20guid'c3d8581f-3bdd-4dda-96d0-0f1032cdd349'”,功能是获取host web下id等于“c3d8581f-3bdd-4dda-96d0-0f1032cdd349”的sub site(更多更详细的使用细节可以参考SharePoint 2013: 了解和使用 SharePoint 2013 REST 接口),点击“Execute”,但是第二个textbox中并没有任何结果,出什么问题了呢,按F12调试下吧,结果发现下图中的错误提示
这是怎么回事,我们不是已经加载SP.RequestExecutor.js了吗,为什么还会报Uncaught TypeError,经过在网上一番查找,最后发现问题出在function的定义方式上,function总共有两种定义方式:
a.函数语句
1 method1(); 2 function method1(){ 3 alert("Hello"); 4 }
b.表达式
1 var fun = function(x){ return x*2; } 2 alert(fun(10));
两种方法主要是在调用上有差别,函数语句方式无论是把第一行代码放在function的前面或者后面都可以正确调用,但是表达式方式,如果把第二句代码放到第一行,就会出错,其中的原因是,函数语句方式定义的function实际在JS文件加载的时候已经被解析器读取了,所以无论调用语句在那,当执行到调用的时候都不会出错,但是表达式方式是只有当代码执行到表达式语句的时候,function才相当于被解析器读取了,所以调用语句只能在表达式之后,第二步中的JS中,我们是使用函数语句的方式定义的function,所以在JS文件加载的时候runRestAPI就已经被解析器读取了,即使我们使用getScript载入了SP.RequestExecutor.js,runRestAPI作为回调函数依然会报错,解决方法很简单,只要在调用runRestAPI的时候使用function再把runRestAPI包上一层即可,此时的function相当于表达式方式定义的,不会被解析器提前读取,所以问题就解决了,如下面的code
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var hostWebUrl; 2 var appWebUrl; 3 4 $(document).ready(function () { 5 var urlParams = getQueryStringParameter(); 6 hostWebUrl = urlParams.SPHostUrl || _spPageContextInfo.webAbsoluteUrl; 7 appWebUrl = urlParams.SPAppWebUrl; 8 }); 9 10 11 function executeRestAPI(restUrl) { 12 13 $.getScript(hostWebUrl + "/_layouts/15/SP.RequestExecutor.js", function gogo() { runRestAPI(restUrl); }); 14 } 15 16 function runRestAPI(restUrl) { 17 var executor = new SP.RequestExecutor(appWebUrl); 18 var targetUrl = "?@target='"; 19 if (restUrl.indexOf("?") >= 0) { 20 targetUrl = "&@target='"; 21 } 22 executor.executeAsync({ 23 url: appWebUrl + "/_api/SP.AppContextSite(@target)" + restUrl + targetUrl + hostWebUrl + "'", 24 method: "GET", 25 headers: { "Accept": "application/json; odata=verbose" }, 26 success: successHandler, 27 error: errorHandler 28 }); 29 } 30 31 function successHandler(data) { 32 $("#resultText").val(data.body); 33 } 34 35 function errorHandler(data, errorCode, errorMessage) { 36 alert(JSON.stringify(data)); 37 } 38 39 function getQueryStringParameter() { 40 var params = document.URL.split('?')[1].split('&'); 41 var result = {}; 42 for (var i = 0; i < params.length; i = i + 1) { 43 var pair = params[i].split('='); 44 result[pair[0]] = decodeURIComponent(pair[1] || ''); 45 } 46 return JSON.parse(JSON.stringify(result)); 47 }
或者直接在getScript的第二个参数里定义没有function name的function,也是可以的。
4.这里介绍个只修改JS文件时,快速重新Deploy App的Tool:SPFastDeploy,当只修改了JS文件时,选择修改的JS文件,之后点击工具栏中的Tool->Fast deploy to SP App,即可在站点上重新部署修改的JS文件,而不需要整个App都重新Deploy,节省不少时间。
本文只作为一个学习Rest API的引子,为了以免误人子弟,对于各种不同的Rest API不做详细说明了,想进一步了解,查下MSDN中说明来的更准确些。