今天完成的事情

学习了服务相关知识和Angular ajax使用。

1. 1. Angular中使用Http服务需要三步：
   a. 在模块装饰器@NgMoudel中导入HttpModule

@NgModule({
  imports:[HttpModule]
})

b. 在组件模块中导入HTTP服务。
import { Http } from '@angular/http'
c. 在组件构造器中声明引入
constructor(private http: Http) {}

2. 2. AJAX
   一般来说有以下三种方式处理一步操作：
   a. 回调函数，funA(funB)这种，层层嵌套；
   b. Promise

new Promise(function (resolve, reject) {})
.then(funA)
.then(funB)
.then(funC);

c. Observable

明天计划的事情

由于今天有一条中的问题，明天看一下Rxjs中文文档。

遇到的问题

@Injectable()
export class LoginService {
  constructor(private http: Http) { }
  getLogMes(username: string, password: string): Observable<any> any{
    // let message = `name=${username}&pwd=${password}`;
    let message = JSON.stringify({'name': username, 'pwd': password});
    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions({headers: headers});
    return this.http.post(LOG_URL, message, options)
      .map(this.extractData)
      .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    return body.data || {};
  }
  private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg);
    return  Observable.throw(errMsg);
  }
}

这个其实是任务5的登录页面，按照例子修改了部分，然后就是这种报错，初次是由于返回值设置的是Observable的泛型设置的不对，但是改成any应该不会出现。.map()方法也报错，看不懂，所以就将返回部分修改成Promise，同时对返回的数据只做JSON转换。

  getLogMes(username: string, password: string): any{
    return this.http.post(LOG_URL, message, options)
      .toPromise()
      .then(res => res.json().data);

之后也没有报错，但是样式文件加载完成后，浏览器一致处于加载的状态。不知道是哪里的问题。
函数中用到了好几个自带方法，不知道是从哪里来干什么的，究竟该去哪里查找这些方法。。。

收获

一脸懵逼。不过老大讲的东西倒是挺好，能用起来还是要下一番功夫。熟能生巧。