您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

关于React Native使用axios进行网络请求的方法

51自学网 2022-05-02 21:35:22
  javascript

在前端开发中,能够完成数据请求的方式有很多,如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进行网络请求的方法的文章就介绍到这了,更多相关React Native网络请求内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com!


vscode中使用npm安装babel的方法
利用Vite2和Vue3实现网站国际化的全过程
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1