美文网首页
react 发送ajax请求

react 发送ajax请求

作者: Arale_zh | 来源:发表于2019-03-14 17:12 被阅读0次

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

    相关文章

      网友评论

          本文标题:react 发送ajax请求

          本文链接:https://www.haomeiwen.com/subject/wsycmqtx.html