Question

我正在尝试将axios功能分隔到单独的服务层。请建议如何在反应中做到这一点？

```
class xxx extends Component {
constructor(props) {
    super(props)
    this.state = {
        ownerName: '',
    }
    this.handleKeyUp = this.handleKeyUp.bind(this)
}

handleKeyUp(e) {
    if (e.target.value.length > 4) {
        var self = this
        axios.get(`/https://exampleService.com/${e.target.value}`)
            .then(function (response) {
                self.setState({ownerName: response.data['name']})
            })
            .catch(function (error) {
                if (error.response) {
                    if (error.response.status === 404) {
                        self.setState({ownerName: `\u2014`})
                    }
                }
            })
    }
}

render () {
    return (
        <div>
            <Input OnKeyUp={(event) => this.handleKeyUp(event)} ></Input>
        </div>
    );
}
}
```

我尝试使用module.exports进行如下分离，但是我无法从模块组件获取输出并将其传递给xxx组件。

```
module.exports = {
  axios.get ......
  .....
}

```

Answer 1

您可以创建一个名为Api的类，并在该类中创建一个执行axios调用的函数。此函数应接受回调函数，您可以使用该函数设置组件中的状态。

export default class Api{

    function DoAxiosCall(callback){
    axios.get(`/https://exampleService.com/${e.target.value}`)
                .then(function (response) {
                    callback(response.data['name']);
                })
                .catch(function (error) {
                    if (error.response) {
                        if (error.response.status === 404) {
                            callback(`\u2014`)
                        }
                    }
                })
    }
}

从组件中，您可以导入Api类，创建它的实例，然后调用处理axios调用的函数，将处理更新状态的函数作为回调传递。

import Api from './path/to/Api';
....
class xxx extends Component {
constructor(props) {
    super(props)
    this.state = {
        ownerName: '',
    }
    this.handleKeyUp = this.handleKeyUp.bind(this)
    this.api = new Api();
}

updateState =(newOwner)=> this.setState({ownerName:newOwner})

handleKeyUp(e) {
    if (e.target.value.length > 4) {
      this.api.DoAxiosCall(this.updateState);
    }
}

render () {
    return (
        <div>
            <Input OnKeyUp={(event) => this.handleKeyUp(event)} ></Input>
        </div>
    );
}
}

Answer 2

您可以创建如下的服务模块。

 // xxx component

 const {getOwner} = require('path of service.js'); 
 ....
 ....
 handleKeyUp(e) {
 if (e.target.value.length > 4) {
    return getOwner(`https://exampleService.com/${e.target.value}`)
        .then(response => this.setState({ownerName: response}))
 }
} 
...
...

现在，您可以通过要求在xxx组件中使用此getOwner函数。

myNote

react js - 如何进行服务层调用

2 个答案: