关于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选中select控件 无法设置selected的解决方法
Sep 01 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
You might like
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Mac 上切换Python多版本
2017/06/17 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
英国日常交易网站:Wowcher
2018/09/04 全球购物
客服工作职责
2013/12/11 职场文书
安全生产投入制度
2014/01/29 职场文书
食品业务员岗位职责
2014/03/18 职场文书
会计求职信
2014/05/29 职场文书
任命书怎么写
2014/06/04 职场文书
企业宗旨标语
2014/06/10 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL