React Native --网络请求(fetch)

几乎市面上的App都少不了从服务器上获取数据，这就需要进行网络请求，RN中集成了很不错的链式请求数据的方法(fetch API)。

RN网络请求常用方法

fetch: 发送请求,默认Get请求
then : 传入一个回调函数，当上一次操作处理完,就会自动执行then的回调函数,并且自动把处理完的结果,作为参数传递给then的回调函数
response.json(): 把请求到的数据转换为json
catch : 在请求或者处理数据失败的时候,就会执行catch里的回调函数，捕获异常复制代码

GET请求

//  定义GET请求
getRequestData = (url) => {
    let args = {
        method:'GET',
    }

    fetch(url, args)
        .then((response)=>{
            return response.json();
        })
        .then((responseJson)=>{
            Alert.alert("提示", responseJson);
        })
        .catch((error)=>{
            Alert.alert("提示", error);
        })
};复制代码

POST请求

POST请求有三种方式:

• application/x-www-form-urlencoded： 普通http请求方式，参数是普通的url参数拼接
• application/json： JSON请求方式，参数是json格式
• multipart/form-data: 文件上传

 Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以定制header参数，请求方式，提交数据。复制代码

application/x-www-form-urlencoded请求

• 注意:Content-Type:一定不要写错,否则服务器解析不出来

postRequestData = (url) => {
    let formData = {
        'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',
    };

    var opts = {
        method:'POST',
        body:JSON.stringify(formData),
        headers:{
            'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ',
            'Content-Type':'application/x-www-form-urlencoded',
        },
        timeout:20 * 1000,
    };

    fetch(url, opts)
        .then((response) => {
            if (response.ok) {
                return response.json();
            }
        })
        .then((responseJson) => {
            console.log("结果Code：" + responseJson.code);
            console.log("结果message：" + responseJson.message);
            console.log("请求的名字为：" + responseJson.data.nickName);
        })
        .catch((error) => {
            console.log("错误信息为：" + error);
        });
};复制代码

application/json请求

• JSON.stringify(param) => JSON对象转字符串 {name:xmg} => '{name:xmg}'
• 因为body:只能放字符串,所以必须要把JSON对象转字符串
• 注意:Content-Type:一定不要写错,否则服务器解析不出来

postRequestData = (url) => {
    let formData = {
        'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',
    };

    var opts = {
        method:'POST',
        body:JSON.stringify(formData),
        headers:{
            'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ',
            'Content-Type':'application/json',
            'Accept': 'application/json',
        },
        timeout:20 * 1000,
    };

    fetch(url, opts)
        .then((response) => {
            if (response.ok) {
                return response.json();
            }
        })
        .then((responseJson) => {
            console.log("结果Code：" + responseJson.code);
            console.log("结果message：" + responseJson.message);
            console.log("请求的名字为：" + responseJson.data.nickName);
        })
        .catch((error) => {
            console.log("错误信息为：" + error);
        });
};复制代码

有过iOS开发经验的小伙伴，可以在Xcode控制台输出打印服务器返回的JSON数据，但是RN中返回的JSON数据如果直接打印，会出现:[object:object]的输出信息，故如果想要查看服务器返回的内容，需要知道服务器返回数据的结构，来一层层的解析。

结果如下：