React Native如何使用axios进行网络请求
本篇内容主要讲解“React Native如何使用axios进行网络请求”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React Native如何使用axios进行网络请求”吧!
在前端开发中,能够完成数据请求的方式有很多,如Ajax、jQuery ajax、axios和fetch等。不过,随着技术的发展,现在能够看到的基本上也就axios和fetch两种。
axios是一个基于Promise的Http网络库,可运行在浏览器端和Node.js中,Vue应用的网络请求基本都是使用它完成的。axios有很多优秀的特性,如支持请求的拦截和响应、取消请求、JSON自动转换、客户端防御XSRF等。
使用axios之前,需要先在项目中安装axios插件,安装命令如下。
//npm npm install axios --save//yarnyarn 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进行网络请求”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341