关于React Native使用axios进行网络请求的方法


Posted in Javascript onAugust 02, 2021

在前端开发中,能够完成数据请求的方式有很多,如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请求进行一些封装,以方便后期的使用,如下所示。

可以看到,如果直接使用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);

到此这篇关于关于React Native使用axios进行网络请求的方法的文章就介绍到这了,更多相关React Native网络请求内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript实现继承的简单实例
Jul 26 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
You might like
PHP之变量、常量学习笔记
2008/03/27 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
父亲生日宴会答谢词
2014/01/10 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
建筑学专业自荐书
2014/07/09 职场文书
出生公证书
2015/01/23 职场文书
大学生个人学习总结
2015/02/15 职场文书
排球赛新闻稿
2015/07/17 职场文书
大学生军训感言
2015/08/01 职场文书
节水宣传标语口号
2015/12/26 职场文书