MobX http 调用 Rest API 并返回 Observable答案

【问题标题】：MobX http call to Rest API and returning ObservableMobX http 调用 Rest API 并返回 Observable
【发布时间】：2017-11-01 14:48:48
【问题描述】：

我正在尝试使用 MobX。我的问题是

MobX 是否带有内置的 http 片段？如果是，名称/功能是什么？
如果 #1 的答案是否定的，并且我使用 axios，我如何将已解决的 promise 转换为我的 observable？

我知道以下是不正确的。实现这一目标的常用方法是什么？

export class TodoStore {
  @observable todos = [];
  ....
  fetchTodo() {
    axios.get("http://rest.learncode.academy/api/reacttest/tweets")
      .then((response) => {
        response.data.map(item => {
          this.todos.push(new Todo(item));
      })
      .catch((err) => {
        ....
      });
    });
  }
}

【问题讨论】：

标签： promise observable mobx mobx-react

【解决方案1】：

这行得通。我测试过了。

TodoStore.js

class Todo {
  @observable value
  @observable id
  @observable complete

  constructor(value) {
    this.value = value
    this.id = Date.now()
    this.complete = false
  }
}

export class TodoStore {
   @observable todos = []
   @observable filter = ""
   @computed get filteredTodos() {
     var matchesFilter = new RegExp(this.filter, "i")
     return this.todos.filter(todo => !this.filter || matchesFilter.test(todo.value))
   }
  ...... 
  fetchTodos() {
    axios.get("http://rest.learncode.academy/api/reacttest/tweets")
      .then((response) => {
        console.log("in axios ", response.data)
         response.data.map(item => {
           console.log("in axios ", item)
           this.todos.push(new Todo(item.text));
        });
      })
      .catch((err) => {
        console.log("in axios ", err)
      })
  }
}

TodoList.js

export default observer(
 class TodoList extends React.Component {
  componentWillMount() {              
   this.props.store.fetchTodos()  
  }

  ........
  render() {
    ........      
    return <div>
      <h1>todos</h1>
      ......
    </div>
  }
}
)

【讨论】：