关于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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
JS轮播图的实现方法
Aug 24 Javascript
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
You might like
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php动态变量定义及使用
2015/06/10 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Python数据类型详解(一)字符串
2016/05/08 Python
Python数据操作方法封装类实例
2017/06/23 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
浅谈django channels 路由误导
2020/05/28 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
赢在中国观后感
2015/06/02 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技