关于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控制swfObject应用介绍
Nov 29 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
You might like
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
js实现交通灯效果
2017/01/13 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Python实现注册登录系统
2017/08/08 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
使用python编写监听端
2018/04/12 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python定义函数实现累计求和操作
2020/05/03 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
触摸春天教学反思
2014/02/03 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
努力学习保证书
2015/02/26 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js