WebApi接口 - 如何在應(yīng)用中調(diào)用webapi接口

簡單做個webapi(查詢+添加)接口

首先，我們需要有一個webapi接口項目，我這里以前面WebApi接口 - 響應(yīng)輸出xml和json文章的項目來構(gòu)建本篇文章的測試用例；這里新建一個 DbData 數(shù)據(jù)源類，主要用來做數(shù)據(jù)存儲和提供查詢列表數(shù)據(jù)及添加數(shù)據(jù)方法，具體代碼如：

 1 public class DbData 2     { 3         public static DbData Current 4         { 5             get 6             { 7                 var key = "dbKey"; 8                 var db = CallContext.GetData(key) as DbData; 9                 if (db == null)10                 {11                     db = new DbData();12                     CallContext.SetData(key, db);13                 }14                 return db;15             }16         }17 18 19         private static List<MoStudent> students = new List<MoStudent>(){ 
20             new MoStudent{ Id =1 , Name ="小1", Sex = true, Birthday= Convert.ToDateTime("1991-05-31")},21                      new MoStudent{ Id =2 , Name ="小2", Sex = false, Birthday= Convert.ToDateTime("1991-05-31")},22                      new MoStudent{ Id =3 , Name ="小3", Sex = false, Birthday= Convert.ToDateTime("1991-05-31")},23                      new MoStudent{ Id =4 , Name ="小4", Sex = true, Birthday= Convert.ToDateTime("1991-05-31")}24         };25 26         public List<MoStudent> GetAll()27         {28             return students;29         }30 31         public bool Save(MoStudent moStudent)32         {33             moStudent.Id = students.Max(b => b.Id) + 1;34             students.Add(moStudent);35             return true;36         }37     }

然后，需要在 ValuesController.cs 文件中增加調(diào)用數(shù)據(jù)源類 DbData ，代碼： private DbData db = DbData.Current; 這里使用了 DbData 類中的Current屬性來獲取DbData的實例化對象，這里和大家簡單說下這樣做的好處在于統(tǒng)一管理調(diào)用類的實例，因為我們創(chuàng)建的某個操作類后，可能會在不同的文件或不同業(yè)務(wù)中調(diào)用，如果想調(diào)用其內(nèi)部方法，那么需要用到new一個對象，如此一來多次在使用的地方都new一次感覺很繁瑣，而且不容已維護(hù)；當(dāng)然這里的DbData是簡單的測試用例，沒有用到什么工廠，抽象等設(shè)計來處理聲明這類的實例(大家可以忽略哦)；

好了，我們再 ValuesController 中分別創(chuàng)建個獲取學(xué)生列表信息的方法 GetAllStudents01_2 和添加學(xué)生信息的方法 AddStudent ，然后填寫內(nèi)部代碼如：

 1 private DbData db = DbData.Current; 2  3         [Route("all01_2")] 4         [AcceptVerbs("POST","GET")] 5         public HttpResponseMessage GetAllStudents01_2() 6         { 7             var students = db.GetAll(); 8             return Request.CreateResponse(HttpStatusCode.OK, students); 9         }10 11         [Route("add")]12         [HttpPost]13         public HttpResponseMessage AddStudent(MoStudent moStudent)14         {15             var httpStatus = HttpStatusCode.OK;16             if (ModelState.IsValid)17             {18                 var isfalse = db.Save(moStudent);19             }20             return Request.CreateResponse(httpStatus, moStudent);21         }

兩個方法的參數(shù)或者返回信息沒有做更多的處理，能夠大家看就行，好了創(chuàng)建完api接口代碼后，我們來測試訪問下學(xué)生列表接口，地址如： http://localhost:1001/s/all01_2 ，得到的結(jié)果圖：

返回的是json格式數(shù)據(jù)，本篇圍繞的數(shù)據(jù)格式都是json，這也是很常用的返回數(shù)據(jù)格式之一；

MVC代碼中如何調(diào)用api接口

首先，創(chuàng)建一個mvc項目，創(chuàng)建方式可以看這篇文章WebApi - 路由，然后再 HomeController.cs 文件中增加Index(學(xué)生列表)和Add(添加學(xué)生信息)兩個Action方法，并且填寫代碼如：

 1 public class HomeController : Controller 2     { 3  4         public async Task<ActionResult> Index() 5         { 6  7             var searchData = new MoStudent(); 8             //查詢條件 9 10             var webapiUrl = "http://localhost:1001/s/all01_2";11             var httpResponseMsg = new HttpResponseMessage();12 13             using (var httpClient = new HttpClient())14             {15                 httpResponseMsg = await httpClient.PostAsync(webapiUrl, searchData, new System.Net.Http.Formatting.JsonMediaTypeFormatter());16             }17             var students = httpResponseMsg.Content.ReadAsAsync<List<MoStudent>>().Result;18 19             return View(students);20         }21 22         [HttpGet]23         public ActionResult Add()24         {25 26             return View();27         }28 29         [HttpPost]30         public async Task<ActionResult> Add(MoStudent model)31         {32             if (ModelState.IsValid)33             {34                 var webapiUrl = "http://localhost:1001/s/add";35                 var httpResponseMsg = new HttpResponseMessage();36 37                 using (var httpClient = new HttpClient())38                 {39                     httpResponseMsg = await httpClient.PostAsync<MoStudent>(webapiUrl, model, new System.Net.Http.Formatting.JsonMediaTypeFormatter());40                 }41                 model = httpResponseMsg.Content.ReadAsAsync<MoStudent>().Result;42             }43 44             ModelState.AddModelError("", model.Id > 0 ? "添加成功" : "添加失敗");45             return View(model);46         }47     }

這里需要講解幾個注意的地方， HttpClient 類主要用來做接口請求的，這里我通過傳遞參數(shù)給她的擴(kuò)展 PostAsync 方法來請求我們剛才創(chuàng)建的webapi地址 http://localhost:1001/s/all01_2 ，這里先來簡單看下這個方法使用到的參數(shù)說明：

 View Code

值得注意的是最后一個參數(shù) new System.Net.Http.Formatting.JsonMediaTypeFormatter() ， JsonMediaTypeFormatter 類是繼承了 MediaTypeFormatter 類并重寫了格式化的一些方法，因為我們創(chuàng)建的api項目要求的是json格式的參數(shù)和返回，所以這里用的是 JsonMediaTypeFormatter 類，還有其他的格式如： XmlMediaTypeFormatter 等這個也在上一篇分享文章中使用到了，各位可以看下做下了解；PostAsync方法是異步的方法，所以咋們需要在調(diào)用的時候使用 await 修飾，有了await自然要有她的配套組合 async 和 Task 因此就有了咋們的 public async Task<ActionResult> Index() 這樣的代碼；好了廢話太多了，咋們一起來看下試圖view中綁定代碼和綁定學(xué)生列表后的查詢結(jié)果：

 View Code

執(zhí)行方法這個學(xué)生列表Action的Index方法后，在瀏覽器的效果如：

看到結(jié)果后，咋們的mvc調(diào)用webapi的例子就成功了，下面來看下添加功能，添加方法里面的主要調(diào)用webapi代碼和查詢學(xué)生列表方法的代碼幾乎一樣，只是這里調(diào)用api方法后返回的結(jié)果是單個學(xué)生對象信息不是集合了，這里只貼一下Add視圖代碼供大家參考：

 View Code

 值得注意的是這種后臺請求不同域之間的api接口，不會有跨域的限制，除非接口本身有限制外，下面要講解的ajax方式就不相同了；

ajax如何調(diào)api接口

首先，咋們需要明確一個東西，ajax調(diào)用接口不能跨域，這個是必須了解的，比如手機(jī)h6的webapp通常都是使用ajax來調(diào)用接口獲取數(shù)據(jù)的，而且大部分需求都是跨域來請求的，因此本示例會在下面講解的時候簡單提及到常用的幾種處理方式，并且使用其中一種來講解，希望能給大家?guī)韼椭?；為了測試跨域訪問情況，我們在上一節(jié)點的試圖中增加如下布局代碼：

 View Code

然后，jquery綁定查詢按鈕事件代碼如：

 1 <script type="text/javascript"> 2  3     $(function () { 4  5         $("#btnSearch").on("click", function () { 6  7             var tabObj = $("#tab tbody"); 8             tabObj.html('tr><td colspan="4">加載中...</td></tr>'); 9 10             $.post("http://localhost:1001/s/all01_2", {}, function (data) {11 12                 var tabHtml = [];13                 $.each(data, function (i, item) {14 15                     tabHtml.push('<tr>');16                     tabHtml.push("<td>" + item.Id + "</td>");17                     tabHtml.push("<td>" + item.Name + "</td>");18                     tabHtml.push("<td>" + (item.Sex ? "男" : "女") + "</td>");19                     tabHtml.push("<td>" + item.Birthday + "</td>");20                     tabHtml.push('</tr>');21                 });22                 if (tabHtml.length <= 0) { return false; }23 24                 tabObj.html(tabHtml.join(''));25             });26         });27     })28 </script>

然后，用iis新發(fā)布一個站點指向和上面mvc項目例子一樣的磁盤目錄，然后iis路由地址為： http://localhost:1002/home ，注意那我們剛才的webapi地址為 http://localhost:1001/s/all01_2 ，這兩個地址區(qū)別在于，一個是1002端口一個是1001端口，這樣就構(gòu)建好了咋們跨域的要求了（當(dāng)然有些朋友會在意在說為什么不配置個host本地域名來測試呢 ，我只能說這是一樣的效果），然后我們訪問 http://localhost:1002/home 路由，并且點擊我們綁定好的查詢事件按鈕，會有這樣一個ajax請求輸出來的錯誤：

很顯然這是跨域提示的錯誤，我們要怎么避免他呢，市面上通常的方式

1. 使用jsonp格式來處理

2. 在接口端寫入接受跨域請求的設(shè)置

很顯然咋們本次測試用的是第二種，方便，快速就能完成，不過這里因為是webapi，所以這里直接使用微軟提供的Cors的服務(wù)，我們需要使用nuget控制臺錄入如下指定：  Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.0.0  ，目前最后更新的版本是：

能看出來，這個包現(xiàn)在已經(jīng)停止了更新了，這里我為什么用5.0.0版本呢，因為我項目的其他包最新是5.0.0，而安裝了5.2.3版本的話項目中的很多包都會升級并且有些包自動安裝不上，會導(dǎo)致項目出問題變動很大，多方嘗試后還是這個5.0.0版本的穩(wěn)定(這個情況需要朋友注意下)；怎么用呢，這里只需要在咋們webapi項目中的 App_Start/WebApiConfig.cs 文件中注冊一下就行了，代碼如： config.EnableCors(); 意思是啟動Cors跨域；然后咋們在自定義 ValuesController class上方增加如下標(biāo)記： [EnableCors("http://localhost:1002", "*", "*")] ，這個EnableCors第一個參數(shù)是允許跨域訪問的域地址，好了咋們還是點擊ajax請求接口中的查詢按鈕，得到效果：

能正常獲取出來webapi接口數(shù)據(jù)了，好了咋們再來簡單看下在Controller中 EnableCors 允許傳遞的參數(shù)說明：

 View Code

由上的參數(shù)說明我們可以這樣設(shè)置，來確保任何請求地址都能訪問到我們webapi接口：

EnableCors的第一個參數(shù)如果是*，表示任何請求地址來源都運行訪問該webapi；第二個參數(shù)如果是*，表示任意頭部head信息都可以；第三參數(shù)為*，表示任意請求方式(如：Post，put，delete等)；總結(jié)下ajax方式請求不同域名接口，需要跨域運行設(shè)置，這個也是很多互聯(lián)網(wǎng)公司webapp應(yīng)用很常見的一種方式；

只要跨域請求成功后，添加學(xué)生信息就好做了，下面直接貼出通過ajax調(diào)用添加學(xué)生信息接口代碼：

 1 <script type="text/javascript"> 2  3     $(function () { 4  5         $("#btnAjaxSave").on("click", function () { 6  7             var divResult = $("#divResult"); 8             divResult.html("保存中,請稍后..."); 9 10             var param = {11                 Name: $("input[name='Name']").val(),12                 Sex: $("input[name='Sex']").is(":checked"),13                 Birthday: $("input[name='Birthday']").val()14             };15 16             $.post("http://localhost:1001/s/add", param, function (data) {17                 console.log(data);18                 if (data) {19                     divResult.html(data.Id > 0 ? "添加成功" : "添加失敗");20                 } else {21                     divResult.html("");22                 }23             });24         });25     })26 27 </script>

對應(yīng)的學(xué)生信息添加接口：

 1 [Route("add")] 2         [HttpPost] 3         public HttpResponseMessage AddStudent(MoStudent moStudent) 4         { 5             var httpStatus = HttpStatusCode.OK; 6             if (ModelState.IsValid) 7             { 8                 var isfalse = db.Save(moStudent); 9             }10             return Request.CreateResponse(httpStatus, moStudent);11         }