gh-qqnews-hunger v0.0.3

腾讯新闻的数据请求模块

背景介绍(Background)

hunger: 饥饿，用于表示对数据的渴望，是基于axios实现的前端数据请求模块，在 axios 的基础上，额外封装了 jsonp 和新闻客户端 jsapi 的两种数据请求方式。

axios 是一个非常优秀的前端数据请求模块，提供了请求数据和响应数据的拦截器，并可以在浏览器和 node 中使用。

安装(Install)

使用 tnpm:

$ tnpm install gh-qqnews-hunger

使用 npm:

$ npm install gh-qqnews-hunger

使用 bower:

$ bower install gh-qqnews-hunger

使用 yarn:

$ yarn add gh-qqnews-hunger

使用 jsDelivr 的 CDN 地址:

<script src="https://cdn.jsdelivr.net/npm/gh-qqnews-hunger"></script>

使用 unpkg 的 CDN 地址:

<script src="https://unpkg.com/gh-qqnews-hunger"></script>

使用方式

引入进来之后，就可以使用hunger进行数据请求了。这里提供了两种方式：

• 简易方式；
• 完全基于 axios 的使用方式；

简易方式

建议方式中返回的数据就是接口返回的数据。以 es6 的 import 为例：

import hunger from "gh-qqnews-hunger";

使用方式

// 只有一个url，默认为get方式请求
hunger("https://api.prize.qq.com/v1/newsapp/answer/share/oneQ?qID=506336")
    .then((result) => console.log(result))
    .catch((err) => console.error(err));

// 带有参数，默认为get方式请求
hunger("https://api.prize.qq.com/v1/newsapp/answer/share/oneQ", {
    qID: 506336,
})
    .then((result) => console.log(result))
    .catch((err) => console.error(err));

// 带有参数，并进行配置
hunger(
    "https://api.prize.qq.com/v1/newsapp/answer/share/oneQ",
    {
        qID: 506336,
    },
    {
        method: "post",
        timeout: 6000,
    }
)
    .then((result) => console.log(result))
    .catch((err) => console.error(err));

// 没有参数，并需要配置时，需要将参数位置设置为null
hunger(
    "https://api.prize.qq.com/v1/newsapp/answer/share/oneQ?qID=506336",
    null,
    {
        method: "get",
        timeout: 6000,
    }
)
    .then((result) => console.log(result))
    .catch((err) => console.error(err));

jsonp 的方式需要特别标注，其他的均会根据环境自行判断：

// 带有参数，并进行配置
hunger(
    "https://api.prize.qq.com/v1/newsapp/answer/share/oneQ",
    {
        qID: 506336,
    },
    {
        dataType: "jsonp", // 表明是jsonp请求
        jsonpCallback: "callback", // 回调的方法名，默认是callback
    }
)
    .then((result) => console.log(result))
    .catch((err) => console.error(err));

参数 config 的配置

hunger 的数据格式如下：

hunger(
    url: string, // 第一个参数请求的url
    data?: object, // 请求中需要的数据，不论get和post，均放在这里，均是object类型
    config?: HungerRequestConfig // 与axios中的配置要求一样，并额外扩展了两个参数dataType和jsonpCallback
)

config 中的字段，只在当前请求中有效，以下参数均为可选参数，在有必要时填写即可：

defaults 的配置

hunger 还有个 defaults 的属性可以设置，这个配置是所有的请求都有效的。字段与 config 保持一致。

hunger.defaults.baseURL = "https://api.prize.qq.com"; // 设置拼接在url前面的参数，若url为绝对链接，则不进行拼接
hunger.defaults.method = "post"; // 数据请求方式
hunger.defaults.timeout = 5000; // 超时时间

hunger("/v1/newsapp/answer/share/oneQ?qID=506336");
// https://api.prize.qq.com/v1/newsapp/answer/share/oneQ?qID=506336

复杂方式

复杂方式的介绍方式就简单多了，使用方式与 axios 的方式完全一样，并带有 axios 所有的功能，例如拦截器等。

• axios 的 github：https://github.com/axios/axios
• 中文文档：http://axios-js.com/zh-cn/docs/index.html

使用复杂方式时，需要从 hunger 中取出 haxios：

const haxios = hunger.haxios;

// 添加请求拦截器，这里仅输出，然后返回
haxios.interceptors.request.use((config) => {
    console.log(config);
    return config;
});
haxios(
    "https://api.prize.qq.com/v1/newsapp/answer/share/oneQ?qID=506336"
).then((response) => console.log(response));

而且 haxios 中接口的数据则需要稍微解析一下：

{
    status: 200, // http状态
    statusText: 'ok',
    config: config, // 请求的config
    data: {} // 接口中的数据
}

协议(License)

MIT