ajax请求
- 发送ajax请求的几种方式
- JQuery:一般不用,太重,不是专事专做
- axios: axios.get(url)
- fetch: fetch(url)
- axios fetch 用法
class App extends React.Component{ constructor(props){ super(props); // 定义数据的初始状态 this.state = { attr:{ cn_name:null, en_name:null, } } } // 发送ajax请求 componentDidMount(){ let url = "http://shuyantech.com/api/cndbpedia/avpair?q=%E6%B8%85%E5%8D%8E%E5%A4%A7%E5%AD%A6"; // axios方式 axios.get(url) .then( (response)=>{ let data = response.data.ret; // 更新数据状态 this.setState({ attr:{ cn_name:data[0][1], en_name: data[1][1] } }) } ) .catch( (error)=>{ console.log(error) } ) // fetch方式 fetch(url) // 返回response .then((response)=> {return response.json()}) // 获取数据 .then((data)=> { data = data.ret; // 更新数据状态 this.setState({ attr:{ cn_name:data[0][1], en_name: data[1][1] } }) }) // 捕获异常 .catch((e)=> {console.log(e)}) } render(){ let {attr} = this.state; // 根据数据状态显示不同结果 if(!attr){ return <h2>正在请求CNdbpedia数据,请稍后...</h2> }else{ return( <div> <p>中文名:{attr.cn_name}</p> <p>英文名:{attr.en_name}</p> </div> ) } } } ReactDOM.render( <App />, document.getElementById("root") )
网友评论