关于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中val()表单取值赋值的实例代码
Aug 15 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JSONP原理及简单实现
Jun 08 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
You might like
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
Vue自定义指令写法与个人理解
2019/02/09 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python新手学习标准库模块命名
2020/05/29 Python
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
有个性的自我评价范文
2013/11/15 职场文书
教师实习自我鉴定
2013/12/18 职场文书
玲玲的画教学反思
2014/02/04 职场文书
《颐和园》教学反思
2014/02/26 职场文书
签约仪式主持词
2014/03/19 职场文书
车辆年审委托书范本
2014/09/18 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
医院科室评语
2015/01/04 职场文书
工作保证书
2015/01/17 职场文书
离婚协议书范文
2015/01/26 职场文书
关于军训的感想
2015/08/07 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
vue实现同时设置多个倒计时
2021/05/20 Vue.js