React Native使用axios进行网络请求

原创

xiangzhihong

修改于 2021-08-05 18:06:58

2.5K0

修改于 2021-08-05 18:06:58

文章被收录于专栏：向治洪

在前端开发中，能够完成数据请求的方式有很多，如Ajax、jQuery ajax、axios和fetch等。不过，随着技术的发展，现在能够看到的基本上也就axios和fetch两种。

axios是一个基于Promise的Http网络库，可运行在浏览器端和Node.js中，Vue应用的网络请求基本都是使用它完成的。axios有很多优秀的特性，如支持请求的拦截和响应、取消请求、JSON自动转换、客户端防御XSRF等。

使用axios之前，需要先在项目中安装axios插件，安装命令如下。

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

作为一款优秀的网络请求库，axios支持基本的GET、POST、DELET和PUT等请求。比如，使用axios进行GET请求时就可以使用axios.get()方法和使用axios(config { ... })两种方式，如下所示。

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);
});

可以看到，如果直接使用axios进行网络请求会产生大量的冗余代码，所以在实际开发过程中，还需要对axios请求进行一些封装，以方便后期的使用，如下所示。

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();

经过封装处理后，进行网络请求的时候就方便了许多，并且对于一些通用的返回结果我们也在网络层进行了处理。实际使用时，开发者只需要按照要求传入需要的参数，然后再通过异步函数处理返回的结果即可，如下所示。

//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);

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

node.js