react 发送ajax请求

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