2017-05-31 2 views
0

J'essaye avec MobX. Mes questions sontMobX appel HTTP à Rest API et retour Observable

  1. Est-ce que MobX est livré avec une pièce http construite? Si oui, quel est le nom/la fonction?
  2. Si la réponse à # 1 est non et j'utilise axios comment puis-je convertir la promesse résolue à mon observable?

Je sais que ce qui suit est incorrect. Quel est le moyen commun d'y parvenir?

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) => { 
     .... 
     }); 
    }); 
    } 
} 

Répondre

0

Cela fonctionne. Je l'ai testé.

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> 
    } 
} 
)