Question

在同一个组件中，我编写了代码来调用一个API请求并获得响应，使用该响应我想调用其他API。那么，是否可以在同一个组件中调用其他API。

var React  = require('react');
    var routerModule = require('react-router');
    var Link = routerModule.Link;

<!-- language: lang-js -->

    var ProductDetails = React.createClass({
      getInitialState:function(){
        return {
          productDetail:{
            productlisting: {
              PTY_NAME:{},             
            },
            partyid:{}
          }

        }
      }, 
      componentWillMount:function(){
        $.ajax({
          url:'http://example.com'+this.props.params.itemId,
          dataType:'json',
          cache:false,
          success:function(data){
            this.setState({
              productDetail:data
            });
          }.bind(this)
        });

      },   
      render: function() {
        var productDetail = this.state.productDetail;
        return (
          <div> 

            <div className="scrollContent">
              <div className="cards">
                {productBanner}
                <div className="cardBoxContent">
                  <div className="circleIcon whiteBg user-icon">{profileImage}</div>
                  <h2>{pdItems.PRD_NAME}</h2>  
                </div>
              </div>
             </div>
            </div>
          </div>
        );
      }
    });

    module.exports = ProductDetails;

提前致谢

Answer 1

您可以以任何方式对服务调用进行排序，但使用Promise会更容易，这是一件好事（嵌套回调不太深）。您可以像这样重写API调用 -

user> (with-resources [a 100 b 200 c 300]
        ;;body
        (+ a b c)
        ;;cleanup
        (println "cleanup:" :a a :b b :c c)
        ;;error handler
        (error (do (println "Error caught:" (.getMessage error))
                   :error)))

cleanup: :a 100 :b 200 :c 300
600

user> (with-resources [a (throw (Exception. "A THROWS")) b 200 c 300]
        ;;body
        (+ a b c)
        ;;cleanup
        (println "cleanup:" :a a :b b :c c)
        ;;error handler
        (error (do (println "Error caught:" (.getMessage error))
               :error)))

cleanup: :a nil :b nil :c nil
Error caught: A THROWS
:error

user> (with-resources [a 100 b (throw (Exception. "B THROWS")) c 300]
        ;;body
        (+ a b c)
        ;;cleanup
        (println "cleanup:" :a a :b b :c c)
        ;;error handler
        (error (do (println "Error caught:" (.getMessage error))
                   :error)))

cleanup: :a 100 :b nil :c nil
Error caught: B THROWS
:error

user> (with-resources [a 100 b 200 c (throw (Exception. "C THROWS"))]
        ;;body
        (+ a b c)
        ;;cleanup
        (println "cleanup:" :a a :b b :c c)
        ;;error handler
        (error (do (println "Error caught:" (.getMessage error))
                   :error)))

cleanup: :a 100 :b 200 :c nil
Error caught: C THROWS
:error

user> (with-resources [a 100 b 200 c 300]
        ;;body
        (throw (Exception. "BODY THROWS"))
        ;;cleanup
        (println "cleanup:" :a a :b b :c c)
        ;;error handler
        (error (do (println "Error caught:" (.getMessage error))
                   :error)))

Error caught: BODY THROWS
cleanup: :a 100 :b 200 :c 300
:error

<强>更新修改示例，演示如何将第一个服务调用值发送到componentWillMount(){ Promise.resolve($.ajax(...)) .then(function(firstCallResult){ // Do something with firstCallResult ... $.ajax(...); }); }内的函数。

如何使用react js

1 个答案: