React Native uses axios for network requests

In front-end development, there are many ways to complete data requests, such as Ajax, jQuery ajax, axios, and fetch. However, with the development of technology, there are basically two types of axios and fetch that can be seen now.

axios is a Promise-based Http network library, which can run in the browser and Node.js. The network requests of Vue applications are basically completed by using it. Axios has many excellent features, such as support for request interception and response, request cancellation, JSON automatic conversion, client-side defense against XSRF, etc.

Before using axios, you need to install the axios plugin in the project. The installation command is as follows.

//npm 
npm install axios --save
//yarn
yarn add react-native-axios 

As an excellent network request library, axios supports basic GET, POST, DELET and PUT requests. For example, when using axios to make a GET request, you can use the axios.get() method and the axios(config {... }) two ways, as shown below.

axios.get('/getData', {
    params: { 
      id: 123
    }
  }).then(function (response) {
    console.log(response);
  })

axios({
  method: 'GET',
  url: '/getData',
  params: {
    id: 123,
  }
}).then(function (response) {
    console.log(response);
}); 

It can be seen that if you use axios to make network requests directly, a lot of redundant code will be generated, so in the actual development process, some encapsulation of axios requests is needed to facilitate later use, as shown below.

const request = axios.create({
  transformResponse: [
    function (data) {
      return data;
    },
  ],
});

const defaultOptions = {                    //处理默认配置
  url: '',
  userAgent: 'BIZSTREAM Library',
  authentication: {
    integration: {
      access_token: undefined,
    },
  },
};

class Bizstream {
  init(options) {
    this.configuration = {...defaultOptions, ...options};
    this.base_url = this.configuration.url;
    this.root_path = '';
  }

  post(path, params, data, type = ADMIN_TYPE) {
    return this.send(path, 'POST', params, data, type);
  }

  get(path, params, data, type = ADMIN_TYPE) {
    return this.send(path, 'GET', params, data, type);
  }

  send(path, method, params, data, type, headersOption) {
    const url = `${this.base_url}${this.root_path}${path}`;
    const headers = {
      'User-Agent': this.configuration.userAgent,
      'Content-Type': 'application/json',
      ...headersOption,
    };

    return new Promise((resolve, reject) => {
      request({url, method, headers, params, data}).then(response => {
        …. //处理返回结果
      });
    });
  }
}

export const bizStream = new Bizstream();

After the encapsulation process, it is much more convenient to make network requests, and we also process some general return results at the network layer. In actual use, the developer only needs to pass in the required parameters as required, and then process the returned result through the asynchronous function, as shown below.

//GET请求
const hotMovie='';
const data = await apiRequest.get(hotMovie);
//POST请求
let baseUrl = '';
let param = {
   pageNumber: 0,
   cityCd: 31,
 };
const data = await apiRequest.post(baseUrl, param);