SharePoint App开发随笔------之Rest API-CSDN博客

上一篇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是两个回调函数，分别对应成功和失败的情况。

 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 }

View Code

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

 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 }

View Code

或者直接在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中说明来的更准确些。

转载于:https://www.cnblogs.com/ArthurHome/p/7025911.html