修改

Question

我有一个在React JS环境中编写的登录表单（用户名和密码）;表单使用包含用户凭据的REST API。我正在使用Fetch方法来使用API，但它出错了。我需要通过POST访问该服务，但是当我检查（通过chrome控制台 - 网络选项卡）我的应用程序如何访问该服务时，它声明所使用的请求方法是GET。如何修改我的代码以使用帖子访问表单？这是我用来使用网络APT的代码片段：

class Login extends Component {

    //constructor
    constructor() {
        super();
        this.state={
         data: [],
        }
    } 

    //componet did mount method
    componentDidMount(){
        return fetch('http://myjson.com/file')
        .then((response)=>response.json())
        .then((responseJson)=>
        {

           this.setState({
               data:responseJson.token
           })
           console.log(this.state.data)
        })
   }

我研究过使用request.method，但我不确定如何在代码中实现它。我能得到一些帮助吗？ ...提前谢谢

Answer 1

fetch('http://myjson.com/users/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'userName',
    password: 'pwd',
  })
})

这是fetch docs

修改

componentDidMount(){

    return fetch('http://myjson.com/users/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: 'userName',
        password: 'pwd',
      })
    })
    .then((response)=>response.json())
    .then((responseJson)=>
    {

       this.setState({
           data:responseJson.token
       })
       console.log(this.state.data)
    })
}

未处理的拒绝（SyntaxError）：JSON输入的意外结束

1 个答案:

修改