React Native 开发豆瓣评分集中管理 fetch 数据请求

Posted hl1223

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native 开发豆瓣评分集中管理 fetch 数据请求相关的知识,希望对你有一定的参考价值。

豆瓣评分的API接口

接口是从网上查找的,看样子应该是微信小程序里面扣出来的(ua 里面有 wechatdevtools)

接口都需要设置apiKey(054022eaeae0b00e0fc068c0c0a2102a)和 ua(Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (Khtml, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/1.02.1902010 MicroMessenger/6.7.3 Language/zh_CN webview/ token/7858b5b98372a805690a212c8a57f80f),否则会返回错误

首页接口

个人中心接口

电影详情接口

封装 fetch 请求

使用 fetch 获取数据示例:

fetch('https://frodo.douban.com/api/v2/subject_collection/movie_showing/items?start=0&count=20&apiKey=054022eaeae0b00e0fc068c0c0a2102a', 
    method: 'GET',
    headers: 
        'Content-Type': 'application/json',
        'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/1.02.1902010 MicroMessenger/6.7.3 Language/zh_CN webview/'
    
).then(response => 
    return response.json();
).then(data => 
    console.log('获得数据:',data);
).catch(error => 
    alert('error:' + JSON.stringify(error));
);

封装接口

在 src 目录创建 utils 目录,再在里面创建 ajax.js 统一管理应用的 fetch 请求,实现步骤如下:

1.先声明 url 和 apiKey 常量

const baseUrl = 'https://frodo.douban.com/api/v2';
const apiKey = '054022eaeae0b00e0fc068c0c0a2102a';

2.将 fetch 封装成xhr方法,方便使用是调用:

  • 参数为 pathname, method, params, headers
  • fetch 的 url 有 baseUrl + pathname 组成,但是实际从中可能有打点上报或其他三方接口,所以 pathname 如果含有 https 就不进行拼接
  • requestBody 中,headers 默认有 Content-Type 和 User-Agent,如果使用时还传入了 header 则继续添加传入的header
  • requestBody 的 body 必需是字符串,传入的 params 是 object 类型,需要将其 JSON.stringify
  • 如何请求为 get 请求,那么 requestBody 中就不能有 body,需要将参数拼接到 url 后面
  • 由于 get 接口有两种类型:https:xxx.com?xxx=xxx&xxx=xxxhttps:xxx.com/id/xxx?xxx=xxx&xxx=xxx,第一种,直接 JSON.stringify(params) 拼接到 url 末尾,第二种,则 约定 id 为 $id,将 params 参数里面的 id 的值替换 $id。
const xhr = (pathname, method, params, headers) => 
    return new Promise((res, rej) => 
        let url = ~pathname.indexOf('https://') ? pathname : (baseUrl + pathname);
        //拼接 
        let requestBody = 
            method: method,
            headers: 
                'Content-Type': 'application/json',
                'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/1.02.1902010 MicroMessenger/6.7.3 Language/zh_CN webview/',
                ...headers
            ,
            body: JSON.stringify(params)
        

        if (method === 'GET' && params) 
            if (params.id && ~pathname.indexOf('$id')) 
                url = url.replace('$id', params.id);
                delete params.id;
            

            let urlSearch = JSON.stringify(params).replace(/||\\"/ig, '').replace(/,/g, '&').replace(/:/g, '='); //将object转换成xxx=yyy&xxx=yyy这样的字符串
            url = urlSearch ? `$url?$urlSearch&apiKey=$apiKey` : `$url?apiKey=$apiKey`;

            delete requestBody.body;
        
        fetch(url, requestBody).then(response => 
            return response.json();
        ).then(data => 
            res(data);
        ).catch(error => //暂时还不走到会出现哪些错误,暂时就先把错误弹出
            alert('error:' + JSON.stringify(error));
        );
    )

3.调用 xhr,导出 ajax 供其他模块使用,ajax 返回值是 xhr 返回的一个 Promise 对象

const ajax = (pathname, data, headers) => 
    return xhr(...apis[pathname], data, headers)


export default ajax;

调用时就非常方便了,也不用写 catch ,因为我们可以在 xhr 里面统一管理错误

ajax(pathname, data, headers).then(res =>  xxxx );

4.处理 ...apis[pathname]

我们在 apis 里集中管理数据请求,get(pathname) 和 post(pathname) 方法需要返回 [pathname,method]

const apis = 
    showing: get('/subject_collection/movie_showing/items'),
    detail: get('/movie/$id'),
    login:post('https://accounts.douban.com/j/wxa/login/basic')
;

5.添加 get 和 post 方法

通过解构赋值的方式声明 get 与 post,如果后面还有其他类型的methods,如 put 之类的也可以继续在数组里面添加变量。

method 方法参数为 method,返回一个 function ,这个 function 参数为 pathname,最终就可以返回一个包含 pathname、method 的数组。

const method = method => pathname => [pathname, method];

const [get, post] = ['GET', 'POST'].map(value => method(value));

6.最终代码:

const baseUrl = 'https://frodo.douban.com/api/v2';
const apiKey = '054022eaeae0b00e0fc068c0c0a2102a';

const xhr = (pathname, method, params, headers) => 
    return new Promise((res, rej) => 
        let url = ~pathname.indexOf('https://') ? pathname : (baseUrl + pathname);
        let requestBody = 
            method: method,
            headers: 
                'Content-Type': 'application/json',
                'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/1.02.1902010 MicroMessenger/6.7.3 Language/zh_CN webview/',
                ...headers
            ,
            body: JSON.stringify(params)
        

        if (method === 'GET' && params) 
            if (params.id && ~pathname.indexOf('$id')) 
                url = url.replace('$id', params.id);
                delete params.id;
            

            let urlSearch = JSON.stringify(params).replace(/||\\"/ig, '').replace(/,/g, '&').replace(/:/g, '='); //将object转换成xxx=yyy&xxx=yyy这样的字符串
            url = urlSearch ? `$url?$urlSearch&apiKey=$apiKey` : `$url?apiKey=$apiKey`;

            delete requestBody.body;
        
        fetch(url, requestBody).then(response => 
            return response.json();
        ).then(data => 
            res(data);
        ).catch(error => //暂时还不走到会出现哪些错误,暂时就先把错误弹出
            alert('error:' + JSON.stringify(error));
        );
    )


const method = method => pathname => [pathname, method];

const [get, post] = ['GET', 'POST'].map(value => method(value));

const apis = 
    //首页
    showing: get('/subject_collection/movie_showing/items'),
    hot: get('/subject_collection/movie_hot_gaia/items'),
    tv: get('/subject_collection/tv_hot/items'),
    variety: get('/subject_collection/tv_variety_show/items'),
    book: get('/subject_collection/book_bestseller/items'),
    music: get('/subject_collection/music_single/items'),
    //详情
    detail: get('/movie/$id'),
    photos: get('/movie/$id/photos')
;

const ajax = (pathname, data, headers) => 
    return xhr(...apis[pathname], data, headers)


export default ajax;

调用接口

import ajax from '../utils/ajax';

...
ajax('detail', //获取详情
  id: 1291561
).then(value => 
  console.log(value);
)
...
ajax('showing', //获取热映列表
  start: 0,
  count: 20
).then(value => 
  console.log(value);
)
...

技术图片

以上是关于React Native 开发豆瓣评分集中管理 fetch 数据请求的主要内容,如果未能解决你的问题,请参考以下文章

React Native 开发豆瓣评分环境搭建

豆瓣评分 9.0,超 10 万开发者的入门选择,这本经典好书终于升级啦!

豆瓣评分9.2,UNIX类图书销量第一,系统管理领域内当之无愧的圣经

豆瓣评分8.9!这本原生中文版的JVM宝典,你还没读么?

爬取豆瓣网页上的电影(包括图片,评分,和简介等)

从豆瓣电影评分算法说起