react-native Fetch的封装

最新推荐文章于 2023-03-10 00:59:42 发布

原创最新推荐文章于 2023-03-10 00:59:42 发布 · 725 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #react native #前端

react-native 同时被 2 个专栏收录

35 篇文章

订阅专栏

fetch

1 篇文章

订阅专栏

本文介绍了如何使用React Native的fetch API进行网络请求，并进行了封装。通过设置POST请求，配置headers及处理响应数据，实现了一个基础的网络请求库。

react-native Fetch的封装

 xhr(url, params) {
        try {
            console.log('url:', url, 'params:', params);
            if (params) {
            } else {
                var params = {};
            }
            //    console.log(params)
            return new Promise((resolve, reject) => {
                fetch(url, {
                    method: 'POST', //定义请求方式，POST、GET、PUT等
                    headers: {
                        'Accept': 'application/json', // 提交参数的数据方式,这里以json的形式
                        'Content-Type': 'application/json',
                        "Connection": "keep-Alive"
                    },
                    body: JSON.stringify(params), //提交的参数
                })
                    .then(response => response.json()) //数据解析的方式，json解析
                    .then(response => {
                        // var res = responseJson.code; //返回直接映射完的数据，可以直接使用
                        resolve(response);
                        // alert(JSON.stringify(responseJson))
                    }).catch((error) => {
                       
                    // Alert.alert('warning', 'Get Data Fail, Please Try Again!')
                    console.log(error);
                }).done();
            });
        }catch (e){
           
        }
    }