关于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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
完美的js图片轮换效果
Feb 05 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
You might like
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
PHP中PDO的错误处理
2011/09/04 PHP
php导出生成word的方法
2015/12/25 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python callable()函数用法实例分析
2018/03/17 Python
Python使用OpenCV进行标定
2018/05/08 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
实习单位接收函模板
2014/01/10 职场文书
人事专员的职责
2014/02/26 职场文书
爱护公物标语
2014/06/24 职场文书
婚内房产协议书范本
2014/10/02 职场文书
党员检讨书
2014/10/13 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
python 学习GCN图卷积神经网络
2022/05/11 Python