[英]Angular 2 Error while fetching data from Django Rest API
I'm new to Angular and I'm creating a test Application to accelerate my understanding of the topic. 我是Angular的新手,我正在创建一个测试应用程序,以加快对主题的理解。 Recently I encountered a challenge to integrate Angular2(FrontEnd) with Django(Backend) by fetching the data using REST APIs.
最近,我遇到了一个挑战,即通过使用REST API获取数据,将Angular2(FrontEnd)与Django(Backend)集成在一起。
File: library.service.ts 文件:library.service.ts
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
// Project Modules
import { Library } from '../models';
@Injectable()
export class LibraryService {
private librariesUrl = 'http://127.0.0.1:8000/api/library/create-library/';
constructor(private http: Http) { }
private headers = new Headers({'Content-Type': 'application/json'});
private extractData(res: Response) {
return res.json();
}
private handleError (error: any) {
return Observable.throw(error.message || 'Server error');
}
getAll(): Observable<Library[]> {
return this.http.get(this.librariesUrl, {headers: this.headers})
.map((res) => this.extractData(res.json())).catch((err) => this.handleError(err));
}
}
File: libraries.component.ts 文件:libraries.component.ts
import { Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
// Project Modules
import { Library } from '../models';
import { LibraryService } from './library.service';
@Component({
selector: 'app-libraries',
templateUrl: './libraries.component.html',
styleUrls: ['./libraries.component.css'],
})
export class LibrariesComponent implements OnInit {
libraries: Library[];
personalLibraries: Library[];
collaborativeLibraries: Library[];
constructor(private libraryService: LibraryService, private http: HttpClient) { }
ngOnInit(): void {
/*this.http.get('http://127.0.0.1:8000/api/library/create-library/').subscribe((data: Library[]) => {
console.log(data);
this.personalLibraries = data;
});*/
this.libraryService.getAll().subscribe(response => this.personalLibraries = response);
}
}
REST API REST API
# Django Modules
from django.shortcuts import get_object_or_404
# REST Modules
from rest_framework import status
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.decorators import api_view, authentication_classes, permission_classes
# Project Modules
from .models import Resource, ResourceUserAssociation, Collection, Library
from mysite.utils import get_value_or_404, get_value_or_default, get_boolean
from .serializers import LibrarySerializer, CollectionSerializer
# TODO: Check user authentication here
class CreatorLibraryAPI(APIView):
def get(self, request, format=None):
# slug = get_value_or_404(request.GET, 'slug')
lib_object = Library.objects.filter(type='personal')
sdata = LibrarySerializer(lib_object, many=True).data
return Response(sdata, status=status.HTTP_200_OK)
JSON I'm Expecting 我期待的JSON
[
{
"slug": "tech-stack",
"title": "Technology Stack",
"description": "Library of resources related to Technology",
"type": "personal"
},
{
"slug": "biz-stack",
"title": "Technology Stack",
"description": "Library of resources related to Business",
"type": "personal"
},
{
"slug": "design-stack",
"title": "Design Stack",
"description": "Library of resources related to Design",
"type": "personal"
}
]
Important When I try to fetch data in the Component only, then I successfully get the result [See the commented code in libraries.components.ts]. 重要说明:当我尝试仅获取Component中的数据时,我就成功获得了结果[请参阅library.components.ts中的注释代码]。 But somehow it's not working in the Service, am I doing something wrong with Observables?
但是以某种方式它在服务中不起作用,我是否对Observables做错了?
Note This problem is very similar to Question here . 注意此问题与此处的问题非常相似。
Big thanks to the community in advance :)
预先感谢社区:)
Few changes I've made: Used HttpClient instead of Http. 我所做的更改很少:使用HttpClient而不是Http。 This allows me to remove .map() as HttpClien already returns the JSON (instead of the whole response).
这使我可以删除.map(),因为HttpClien已经返回了JSON(而不是整个响应)。
Correct File: library.service.ts 正确的文件:library.service.ts
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { Headers } from '@angular/http';
import {HttpClient} from '@angular/common/http';
// Project Modules
import { Library } from '../models';
@Injectable()
export class LibraryService {
private librariesUrl = 'http://127.0.0.1:8000/api/library/create-library/';
constructor(private http: HttpClient) { }
private headers = new Headers({'Content-Type': 'application/json'});
private handleError (error: any) {
console.log('---------- CATCH ERROR ----------');
return Observable.throw(error.message || 'this is some random server error');
}
getAll(): Observable<Library[]> {
return this.http.get(this.librariesUrl).catch((err) => this.handleError(err));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.