Javascript 在React.js中与Axios一起使用Async/Await_Javascript_Json_Reactjs_Asynchronous_Ecmascript 2017

Javascript 在React.js中与Axios一起使用Async/Await

javascript json reactjs asynchronous

Javascript 在React.js中与Axios一起使用Async/Await,javascript,json,reactjs,asynchronous,ecmascript-2017,Javascript,Json,Reactjs,Asynchronous,Ecmascript 2017,跟随我正在尝试使用React.js应用程序中的Async/Await向我的服务器发出一个简单的get请求。服务器在/data处加载一个简单的JSON，如下所示 JSON { id: 1, name: "Aditya" } 我能够使用简单的jquery ajax获取方法将数据获取到我的React应用程序。但是，我希望使用axios库和Async/Await来遵循ES7标准。我当前的代码如下所示： class App extends React.Component{ asy

跟随

我正在尝试使用React.js应用程序中的Async/Await向我的服务器发出一个简单的get请求。服务器在

/data

处加载一个简单的JSON，如下所示

JSON

{
   id: 1,
   name: "Aditya"
}

我能够使用简单的jquery ajax获取方法将数据获取到我的React应用程序。但是，我希望使用axios库和Async/Await来遵循ES7标准。我当前的代码如下所示：

class App extends React.Component{
 async getData(){
     const res = await axios('/data');
     console.log(res.json());
 }
 render(){
     return(
         <div>
             {this.getData()}
         </div>
     );
 }
}

类应用程序扩展了React.Component{
异步getData（）{
const res=等待axios（'/data'）；
log（res.json（））；
}
render（）{
返回(
{this.getData（）}
);
}
}

使用此方法，我得到以下错误：

对象作为React子对象无效（找到：[对象承诺]）。如果要呈现子对象集合，请改用数组

我没有正确地实施它吗？

出现了两个问题：

您的

getData

从不返回任何内容，因此它的承诺（

async

函数总是返回承诺）在解决时将使用

undefined

解决

错误消息清楚地显示您正试图直接呈现promise

getData

返回的结果，而不是等待它解析然后呈现解析结果

寻址#1:

getData

应返回调用

json

的结果：

async getData(){
   const res = await axios('/data');
   return await res.json();
}

Addressig#2：我们必须看到更多的代码，但从根本上说，您不能这样做

<SomeElement>{getData()}</SomeElement>

…并在渲染时使用该状态：

<SomeElement>{this.state.data}</SomeElement>

根据我过去几个月的经验，我意识到实现这一目标的最佳方法是：

class App extends React.Component{
  constructor(){
   super();
   this.state = {
    serverResponse: ''
   }
  }
  componentDidMount(){
     this.getData();
  }
  async getData(){
   const res = await axios.get('url-to-get-the-data');
   const { data } = await res;
   this.setState({serverResponse: data})
 }
 render(){
  return(
     <div>
       {this.state.serverResponse}
     </div>
  );
 }
}

此外，如果您在组件即将加载时发出任何请求，只需将

async getData（）

替换为

async componentDidMount（）

，并按如下方式更改渲染函数：

render(){
 return (
  <div>{this.state.serverResponse}</div>
 )
}

render（）{
返回(
{this.state.serverResponse}
)
}

render（）工作正常，因为我清楚地提到，使用$.ajax（）可以获得详细信息。我应该添加什么额外的代码？这是一个使用ES7标准向服务器发出的简单get请求。理想情况下，使用ajax占位符（例如，

setTimeout

或类似占位符）和堆栈片段（使用

[]

工具栏按钮）用runnable更新您的问题。堆栈代码段支持React，包括JSX。。。。但添加的代码绝对让事情变得清晰明了。：-）仅供参考，

async/await

是ES2017的一部分，而不是ES7（ES2016）。感谢您提供的信息。它给了我这个错误“'this'在super（）之前是不允许的”。所以我加了super（）；就在“this.state={data:null}；”之前，它后来导致了一个新的错误：“'getData'未定义no undef”@Morfsys:我认为这不是确切的错误消息。：-）我确实说过“像这样的事”。我已经更新了上面的内容，但是在

getData

.catch（err=>{/*…处理错误…*/}）上缺少了这个；现在执行。它说res.json（）不是函数。仅供参考<在上面的示例中，code>return res.json（）必须是

return await res.json（）

，对吗？如果您在下一行返回它，返回行将立即执行，而不是等待它正上方的

const res

定义。@dave4jr：不，您不必这样做，但从代码维护的角度来看，这可能是个好主意，谢谢。“如果在下一行返回，返回行将立即执行，而不是等待…”不，这是错误的。在

等待axios（'/data'）

解析之前，

返回

行不会执行。因此，没有

await

的代码可以工作，由

getData

创建的

async

承诺将从属于

res.json（）

返回的承诺。但是从一个代码维护。当然，你是对的，最好等待它——因为在对

getData

进行更改时，很容易把它弄糟。这基本上就是我的答案，重写了。另外:1。不要使

组件将挂载

为

异步

功能。React将忽略返回的承诺。2.除非

res.data

是一个返回承诺的访问者，否则在访问它时使用

wait

没有任何意义。我只是试图简化答案。无意冒犯，但我认为

then

和

catch

不是承诺跟进的最新标准（ES6）。此外，res.json（）对我不起作用，因此我不得不用res.data替换它，该res.data与

GET

或

POST

请求中的承诺一起提供。

then

和

catch

是ES2015（也称为“ES6”）处理承诺的方式<代码>异步/

等待

是ES2017（“ES8”）的方式。但是您只能在

async

函数中使用

wait

，而使

组件将装入async
就是创造一个永远不会被使用的承诺。如果您想改为使用wait
，这很好，但这样做与在componentWillMount
上单击async不同。无论如何，坦率地说，两个月后再回来发布一个答案，只是对现有答案进行了调整，而没有任何贡献，这是不酷的。
class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            (async () => {
                try {
                    this.setState({data: await this.getData()});
                } catch (e) {
                    //...handle the error...
                }
            })();
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

class App extends React.Component{
  constructor(){
   super();
   this.state = {
    serverResponse: ''
   }
  }
  componentDidMount(){
     this.getData();
  }
  async getData(){
   const res = await axios.get('url-to-get-the-data');
   const { data } = await res;
   this.setState({serverResponse: data})
 }
 render(){
  return(
     <div>
       {this.state.serverResponse}
     </div>
  );
 }
}

async getData(username, password){
 const res = await axios.post('url-to-post-the-data', {
   username,
   password
 });
 ...
}

render(){
 return (
  <div>{this.state.serverResponse}</div>
 )
}

Async/Await with axios 

  useEffect(() => {     
    const getData = async () => {  
      await axios.get('your_url')  
      .then(res => {  
        console.log(res)  
      })  
      .catch(err => {  
        console.log(err)  
      });  
    }  
    getData()  
  }, [])