需要帮助了解此 TODO 提供程序
Posted
技术标签:
【中文标题】需要帮助了解此 TODO 提供程序【英文标题】：Need help understanding this TODO provider 【发布时间】：2018-08-28 18:56:55 【问题描述】：我刚刚从网上下载了一个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)
【问题讨论】：
请在 console.log 中检查 todo... 并更新您的问题.... 【参考方案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
);
);
希望对你有帮助:)
【讨论】：
但是todo 对象是如何创建的？，我在客户端（不是后端）找不到todo 对象的任何架构【参考方案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
);
);
【讨论】：
但是todo 对象是如何创建的？，我在客户端（不是后端）找不到todo 对象的任何架构以上是关于需要帮助了解此 TODO 提供程序的主要内容，如果未能解决你的问题，请参考以下文章