As a frontend developer, I think React Native is also a cool thing. This article does not involve React Native development, but only summarizes some best practices in development. It is not only suitable for React Native.
When developing a project, we always extract common modules. In the process of learning React Native, I also encountered the same scenario and recorded it here. React Native uses fetch as the network request library, and almost every module needs to use network requests. Therefore, it is necessary to extract it as a common module.
Advantages of encapsulating the HTTP module#
- Code reuse
Since many modules will use HTTP requests, encapsulating fetch as a common module can reuse a lot of code.
- High cohesion and low coupling
Extracting the common parts allows each module to focus on its own business logic.
- Facilitates project expansion and future maintenance, and achieves separation of responsibilities.
Specific approach#
First, create a utils directory in the project root directory, and create fetch.js in the utils directory.
To use the entire module in other modules, we need to export it as a module for other modules to use.
export default class fetchUtils {
}
The fetchUtils module should include two methods, get and post request methods. Next, let's write the get method.
static get(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => response.json())
.then((result) => {
resolve(result);
})
.catch(error => {
reject(error);
})
})
}
The get method should be a static method that accepts a url parameter and returns a Promise. The Promise accepts two parameters, resolve and reject, to handle success and failure cases. In the Promise, use fetch to initiate a get request, and then use the chain function then to handle the server's return result. First, extract the json data. When the server successfully returns data, use resolve to return the result; when an error occurs, call the catch method to catch the error.
Here is the post method.
static post(url, data) {
return new Promise((resolve, reject) => {
fech(url, {
method: 'POST',
header: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then((result) => {
resolve(result);
})
.catch(error => {
reject(error);
})
})
}
The post method is similar to the get method. It is also a static method. The post method accepts two parameters, url and the submitted data data. Similarly, the post method returns a Promise with the same parameters as the get method. Then send a POST request to the server. The post request needs to set the method to POST and also needs to set the request header. The request header includes the data type accepted and the Content-Type, both set to application/json. Finally, put the user-submitted data in the body and use JSON serialization for data. Then you need to receive the data returned by the server, which is the same as the get method and will not be repeated here.
The above is the encapsulated HTTP request module. Let's see how to use it.
First, import fetchUtils.
import fetchUtils from '../utils/fetch'
get method
fetchUtils.get(url)
.then(result => {
this.setState({result: JSON.stringify(result)})
})
.catch(error => {
this.setState({result: JSON.stringify(error)})
})
post method
fetchUtils.post(url, data)
.then(result => {
this.setState({result: JSON.stringify(result)})
})
.catch(error => {
this.setState({result: JSON.stringify(error)})
})
Summary#
By encapsulating the fetch method as described above, the code becomes more concise, the business logic becomes clearer, and it is easier to maintain. Using React Native as an example here is just a microcosm of project development, and this encapsulation idea can be learned from in work.