需要帮助了解此 TODO 提供程序

Question

我刚刚从网上下载了一个Ionic 项目。

在文件上：src/pages/home/home.ts 我有以下代码片段：

...
addTodo() {
    let prompt = this.alertCtrl.create({
        title: 'Add Todo',
        message: 'Describe your todo below:',
        inputs: [
            {
                name: 'title'
            }
        ],
        buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: todo => {
                    if (todo) {
                        this.showLoader();
                        this.todoService.createTodo(todo).then(
                            result => {
                                this.loading.dismiss();
                                this.todos = result;
                                console.log("todo created");
                            },
                            err => {
                                this.loading.dismiss();
                                console.log("not allowed");
                            }
                        );
                    }
                }
            }
        ]
    });
    prompt.present();
}
...

在文件上：src/providers/todos.ts 我有以下代码片段：

...
createTodo(todo) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', this.authService.token);
        this.http
            .post(
                'http://127.0.0.1:8080/api/todos',
                JSON.stringify(todo),
                { headers: headers }
            )
            .map(res => res.json())
            .subscribe(
                res => {
                    resolve(res);
                },
                err => {
                    reject(err);
                }
            );
    });
}
...

我的问题是：

在文件上：home.ts 我们有：handler: todo => { ... } 参数的内容是什么：todo？，它是一个对象吗？它是一个带有待办事项标题的字符串吗？

里面发生了什么……

this.todoService.createTodo(todo)

Answer 1

当您在表单中按下“保存”按钮时，处理函数将起作用。

所以，保存按钮的目的是在数据库或后端系统上创建新的待办事项。

我在您的代码中添加了 cmets：

buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: todo => {
                    if (todo) {
                        this.showLoader(); // <= show loading spinning image maybe
                        this.todoService.createTodo(todo).then( // <= call createTodo of todoService and wait for the server's response.

                        result => {
                            this.loading.dismiss(); // <= loading spinning image close
                            this.todos = result; // <= save server's response ( it would be new todo item info or server's success message. it depends on the api servers defined responses. )
                            console.log("todo created");
                        },
                        err => {
                            this.loading.dismiss();
                            console.log("not allowed");
                        }
                    );

...

而createTodo函数是

createTodo(todo) {
    return new Promise((resolve, reject) => {
        let headers = new Headers(); // <= set header to call post request to the api server.
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', this.authService.token);
        this.http
            .post(
                'http://127.0.0.1:8080/api/todos',
                JSON.stringify(todo),
                { headers: headers }
            )
            .map(res => res.json())
            .subscribe(   // <= when server success to create new todo item, server will send success response or error messages.
                res => {
                    resolve(res); // <= success case
                },
                err => {
                    reject(err); // <= error case
                }
            );
    });
}

希望对你有帮助:)

Answer 2

@davidesp 你的第一个问题是参数的内容是什么：todo？

todo 是一个依赖于inputs 字段的对象，todo 是用户定义的名称，你可以给这个对象的任何名称，不需要像subscribe 那样定义有两个状态一个成功阻止另一个错误block.Here 输入有一个字段 title 所以它在对象中只有一项。

        inputs: [
            {
                name: 'title'
            }
        ]

请查看link

当您点击Save 按钮时，会发生以下代码（用 cmets 描述）

addTodo() {
    let prompt = this.alertCtrl.create({
        title: 'Add Todo',
        message: 'Describe your todo below:',
        inputs: [
            {
                name: 'title'
            }
        ],
        buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: todo => {
                    if (todo) { //check data avaiable
                        this.showLoader(); //call loader
                        this.todoService.createTodo(todo)//call todoService
                           .then(
                            result => { //success block todoService
                                this.loading.dismiss(); //loader dismiss call
                                this.todos = result;
                                console.log("todo created");
                            },
                            err => { //error block todoService
                                this.loading.dismiss(); //loader dismiss call
                                console.log("not allowed");
                            }
                        );
                    }
                }
            }
        ]
    });
    prompt.present();
}

@davidesp 您的第二个问题是this.todoService.createTodo(todo) 内部发生了什么

createTodo(todo) {
    return new Promise((resolve, reject) => {
        let headers = new Headers(); // server request Headers initilization
        // setting header value ...
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', this.authService.token);
        // Calling http post method here first parameter is url second data and third is header value ...
        this.http
            .post(
                'http://127.0.0.1:8080/api/todos',
                JSON.stringify(todo),
                { headers: headers }
            )
            //map converting response json value 
            .map(res => res.json())
            .subscribe(
                res => { //success block 
                    resolve(res); // resolve promise 
                },
                err => { //error block 
                    reject(err);// reject promise 
                }
            );
    });
}