How to use/import http module?

前端 未结 13 2320
鱼传尺愫
鱼传尺愫 2020-11-27 16:40

I\'ve been playing with Angular 2 Quickstart.

How can I use/import http module in Angular 2?

I\'ve looked at Angular 2 Todo\'s.js, but it doesn\'t use the ht

13条回答
  •  予麋鹿
    予麋鹿 (楼主)
    2020-11-27 17:37

    Apart from all answers given below if i cover up with some additional points Here is Http how to use/import everything...

    ANGULAR2 HTTP (UPDATED to Beta !!)

    Firstly as clear from name we have to import http file in the index.html like this

    
    

    or you can update this via CDN from here

    then next step we have to import Http and HTTP_PROVIDERS from the bundles provided by angular.

    but yes it is a good practice to provide HTTP_PROVIDERS in the bootstrap file because by using this way it provided on the global level and available for the whole project like following.

    bootstrap(App, [
        HTTP_PROVIDERS, some_more_dependency's
    ]);
    

    and imports are from....

    import {http} from 'angular2/http';
    

    Consuming Rest API's or json using Http

    Now along with the http we have some more options provided with the angular2/http i.e like Headers, Request, Requestoptions etc etc. which is mostly used while consuming Rest API's or temporary Json data. firstly we have to import all this like following:

    import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
    

    sometimes we need to provide Headers while consuming API's for sending access_token and many more things that is done using this way:

    this.headers = new Headers();
    this.headers.append("Content-Type", 'application/json');
    this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'));
    

    now come to RequestMethods: bascially we use GET, POST but we have some more option you can refer here...

    we can use use requestmethods by using RequestMethod.method_name

    there are some more option for the API's for now i posted one example for POST request the help by using some important methods:

    PostRequest(url,data) {
            this.headers = new Headers();
            this.headers.append("Content-Type", 'application/json');
            this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))
    
            this.requestoptions = new RequestOptions({
                method: RequestMethod.Post,
                url: url,
                headers: this.headers,
                body: JSON.stringify(data)
            })
    
            return this.http.request(new Request(this.requestoptions))
                .map((res: Response) => {
                    if (res) {
                        return [{ status: res.status, json: res.json() }]
                    }
                });
        }
    

    for more info i had found two best reference here.. and here...

提交回复
热议问题