如何使用angular4.x的HttpClient訪問.net webapi

網上查閱了很多文章，基本寫的都不是很完整，整理一下。

從.net WebAPI與Angular兩個方面來介紹。

一、.net WebAPI配置

.net WebAPI方面，主要是解決跨域的問題。

1、修改Web.config文件中的system.webServer

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="WebDAVModule" />
    </modules>
    
    <handlers>
      <remove name="WebDAV" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <!--<remove name="OPTIONSVerbHandler" />-->
      <remove name="TRACEVerbHandler" />
      <!--<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />-->
    </handlers>
    
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type,authorization,mypara,username" />
        <add name="Access-Control-Allow-Methods" value="POST,GET,DELETE,PUT,OPTIONS,HEAD" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

2、修改Global.asax.cs文件，在Global類中，添加Application_BeginRequest()方法，代碼如下：

        protected void Application_BeginRequest()
        {
            var list = new List<string>(Request.Headers.AllKeys);
            if (list.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.End();
            }
        }

3、附上對應官方教程《Tour of Hero》的WebAPI代碼，（僅做測試調用，修改等操作不會生效）：

namespace ApiForAngular.Models
{
    public class Hero
    {
        public int id { get; set; }
        public string name { get; set; }
    }
}

        
namespace ApiForAngular.Controllers
{
    [System.Web.Mvc.Route("api/[Controller]")]
    public class HeroController : ApiController
    {
        [HttpGet]
        public List<Hero> Get()
        {
            return heroes;
        }

        [HttpGet]
        public Hero Get(int id)
        {
            foreach (var item in heroes)
            {
                if (item.id == id)
                    return item;
            }
            return null;
        }

        [HttpPost]
        public Hero Post([FromBody]Hero hero)
        {
            hero.id = curId;
            curId++;
            heroes.Add(hero);
            return hero;
        }

        [HttpPut]
        public Hero Put(int id, [FromBody]Hero value)
        {
            for (int i = 0; i < heroes.Count; i++)
            {
                if (id == heroes[i].id)
                {
                    heroes[i].name = value;
                    return heroes[i];
                }
            }
            return null;
        }

        [HttpDelete]
        public void Delete(int id)
        {
            heroes.Remove(heroes.Find(hero => hero.id == id));
        }


        protected List<Hero> heroes = new List<Models.Hero>(
            new Hero[] {
            new Hero() { id = 1, name = "Tom" },
            new Hero() { id = 2, name = "Tim" },
            new Hero() { id = 3, name = "Jane" },
            new Hero() { id = 4, name = "Jack Ma" },
            new Hero() { id = 5, name = "Machael" },
            new Hero() { id = 6, name = "Mr DJ" },
            new Hero() { id = 7, name = "Bill Gates" },
            new Hero() { id = 8, name = "Steven Jobs" },
            new Hero() { id = 9, name = "Paul Graham" }
        });


        protected int curId = 10;
    }
}

二、Angular調用方法

首先，需要注意的是，如果是使用了《Tour of Hero》的教程代碼，需要去掉所有與內存WebAPI相關的引用，即：去掉與InMemoryWebApiModule相關的全部內容。

我的hero.service.ts文件如下：（其中，heroesURL配置成自己發佈的WebAPI的地址與名稱即可）

import { Injectable } from '@angular/core';
import {Hero} from '../Models/hero';
import 'rxjs/add/operator/toPromise';
import {HttpClient, HttpHeaders} from '@angular/common/http';

@Injectable()
export class HeroService {
  private heroesUrl = 'http://**Address of Ip or WebSite**/**Application Name**/api/**Name of API**';
  private headers = { headers: new HttpHeaders({'Content-Type': 'application/json'}) };
  constructor(private httpClient: HttpClient) { }

  getHeroes(): Promise<Hero[]> {
    return this.httpClient.get(this.heroesUrl)
      .toPromise()
      .catch(this.handleError);
  }

  getHero(id: number): Promise<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.httpClient.get(url)
      .toPromise()
      .catch(this.handleError);
  }

  update(hero: Hero): Promise<Hero> {
    const url = `${this.heroesUrl}/${hero.id}`;
    return this.httpClient
      .put(url, JSON.stringify(hero), this.headers)
      .toPromise()
      .then(() => hero)
      .catch(this.handleError);
  }

  create(name: string): Promise<Hero> {
    return this.httpClient.post(this.heroesUrl, JSON.stringify({name: name}), this.headers)
      .toPromise()
      .catch(this.handleError);
  }

  delete(id: number): Promise<boolean> {
    const url = `${this.heroesUrl}/${id}`;
    return this.httpClient.delete(url, this.headers).toPromise()
      .then(() => null).catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    alert('Error');
    const msg = error.message || error;
    alert(msg);
    console.error('An Error Occurred', error);
    return Promise.reject(error.message || error);
  }
}