Question

我是Angular的新手，我为每个组件创建了服务。该服务用于从服务器获取数据。

在我的客户没有告诉我离线保存请求并稍后同步之前，一切正常。

现在，我创建了一个公共服务，它将访问服务器并获取数据，而不是现有的组件附加服务。

我想知道这是否会对项目中的任何事情产生影响。

如果这种方法没问题，那么我将检查CommonRequestService中的网络连接，并将请求保存在数据库中。

请检查以下代码并还原。我会非常感激的。

旧工程师状态服务

export class engineerStatusService {
    constructor(public http: Http) {}
    // Post data to the server if user update the status
    post(path: string, body: Object = {}): Observable < any > {
        let headers = new Headers({
            'Content-Type': 'application/x-www-form-urlencoded',
            'authorization': 'Bearer ' + localStorage.getItem('token')
        });
        let options = new RequestOptions({
            headers: headers
        });
        let data = body;
        let urlSearchParams = new URLSearchParams();
        for (var key in body) {
            urlSearchParams.append(key, body[key]);
        }

        let bodyData = urlSearchParams.toString();
        return this.http.post(`${API_URL}${path}`, bodyData, options)
            .map(response => response.json());
    }
}

更新了工程师状态服务

这里使用了CommonRequestService。

export class engineerStatusService {
    constructor(private commonRequestService: CommonRequestService) {}
    // Post data to the server if user update the status
    post(path: string, body: Object = {}): Observable < Response > {
        let data = body;
        let urlSearchParams = new URLSearchParams();
        for (var key in body) {
            urlSearchParams.append(key, body[key]);
        }
        let bodyData = urlSearchParams.toString();
        return this.commonRequestService.post(path, bodyData)
            .map(response => response.json())
    }
}

CommonRequestService

export class CommonRequestService {
    constructor(private http: Http) {}
    post(path: string, body: Object = {}): Observable < Response > {
        let headers = new Headers({
            'Content-Type': 'application/x-www-form-urlencoded',
            'authorization': 'Bearer ' + localStorage.getItem('token')
        });
        let options = new RequestOptions({
            headers: headers
        });
        return this.http.post(`${API_URL}${path}`, body, options)
    }
}

工程师状态组件

updateStatus(data) {
    this.engineerStatusService
        .post('status', data)
        .subscribe(data => {
            console.log(JSON.stringify(data));
        }, error => {
            console.log('Error occured =>', error);
        })
}

Answer 1

既然你已经做过了，我猜你只需要支持，对吗？

因为如果您愿意再次这样做，这里有两条线索：

1 - 最新浏览器上的service workers非常强大

2 - Http Interceptors，可以捕获您提出的每个请求，并在处理它们之前执行某些操作。这是我向您推荐的解决方案：它功能强大，内置，并且需要较少量的代码。

以角度

1 个答案: