npm package: @rayb/ray-fetch
Description: ray fetch, httpclient
Author: ilex.h
Latest version: 3.0.1

# ray-fetch

## author

ilex.h

## useage

  npm install ray-fetch

- rayfetch

> 高级使用

```js

// web
import _RayFetch from '@rayb/ray-fetch/lib/rayfetch';

// create instance
const RayFetch = new _RayFetch({
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json; charset=utf-8'
  }
});

// 使用
RayFetch.del(url, {params, data}).then(res => res);
RayFetch.get(url, {params, data}).then(res => res);
RayFetch.head(url, {params, data}).then(res => res);
RayFetch.options(url, {params, data}).then(res => res);
RayFetch.post(url, {params, data}).then(res => res);
RayFetch.put(url, {params, data}).then(res => res);

// --- 高级使用 ---

// 1. 统一处理发送数据，用于 sign 校验

const RayFetch2 = new _RayFetch({
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json; charset=utf-8'
  },
  beforeSend: ({ url, method, params, data }) => {
    if (method === 'GET'){
      // do someThing
    } else {
      // encode data
    }

    return {
      url, params, data
    };
  }
});

// 2. 自定义子类

class YourFetch extends _RayFetch {
  constructor(){
    super({
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json; charset=utf-8'
      },
      beforeSend: ({ url, method, params, data }) => {
        if (method === 'GET'){
          // do someThing
        } else {
          // encode data
        }

        return {
          url, params, data
        };
      }
    });
  }
}

// 使用
const myFetch = new YourFetch();
myFetch.del(url, {params, data}).then(res => res);
myFetch.get(url, {params, data}).then(res => res);
myFetch.head(url, {params, data}).then(res => res);
myFetch.options(url, {params, data}).then(res => res);
myFetch.post(url, {params, data}).then(res => res);
myFetch.put(url, {params, data}).then(res => res);

```

- rayrequest

```js

// web
import rayRequest from '@rayb/ray-fetch/lib/rayrequest';

// DELETE GET HEAD OPTIONS POST PUT

// 使用
rayRequest(url, {
  method: 'POST',
  headers: headers, // 可选
  body: params, // 数据
  reject: function(err){}, // 异常
  timeout: 30000,
  hasCookie: true // 是否携带cookie
});

```

- singleFetch

未添加 任何默认 `options`

```js
// web
import singleFetch from '@rayb/ray-fetch/lib/singleFetch';

// DELETE GET HEAD OPTIONS POST PUT

// single use
singleFetch(url).then(d => console.log(d));
// 处理 success 和 error
singleFetch(url).then(d => {
  // success
  if (d.code>= 200 && d.code < 300>){
    // do success
  } else {
    // do error
  }
});

// 使用
singleFetch(url, {
  method: 'POST',
  headers: headers, // 可选
  body: JSON.stringify(data), // 数据
  reject: function(err){}, // 异常
  timeout: 30000,
  hasCookie: true // 是否携带cookie
});

// 使用自定义 promise 处理 error
function payload(data){
  return new Promise((resolve, reject) => {
    if (data && data.status === 200) {
      resolve(data.result);
    } else {
      if (data && data.message) {
        reject(data.message);
      } else {
        reject(data);
      }
    }
  });
}

singleFetch(url, {
  method: 'POST',
  headers: headers, // 可选
  body: JSON.stringify(data), // 数据
  timeout: 30000,
  hasCookie: true // 是否携带cookie
}).then(payload).then(d => {
  // do success
}, err => {
  // do error
});
```

### check

```js
import { checkStatus, checkJson, checkBlob, checkText, timeoutFetch } from '@rayb/ray-fetch';
// or
// import { checkStatus, checkJson, checkBlob, checkText, timeoutFetch } from '@rayb/ray-fetch/lib/_check';

```

## API

## props

|name|type|default| description|
|-----|---|--------|----|
|opts | object | - | 请求参数 |


> rayRequest opts

|name|type|default| description|
|-----|---|--------|----|
|reject | function | `() => {}` | 请求失败时回调 |
|hasCookie | boolean | `undefined` | 是否携带cookie |
|isFormData | boolean | `undefined` | 是否是formdata，如果是formdata时，body中的数据将不进行string化,此时需要自行修改headers中的 `Content-Type`（`application/x-www-form-urlencoded;charset=utf-8、multipart/form-data`）,[formdata使用](https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) ，[MIME参考手册](http://www.w3school.com.cn/media/media_mimeref.asp)|
|headers | object | { Accept: 'application/json','Content-Type': 'application/json; charset=utf-8','X-Api-Key': Store.getCookieByName('X-Api-Key'),'X-Access-Token': ls.read('X-Access-Token'),} | 请求headers |
|method | string: `DELETE、GET、HEAD、OPTIONS、POST、PUT` | `GET` | 请求方式 |
|timeout | number | 30000 | 请求超时，单位 `毫秒`， 默认 30000毫秒 |
|noApiKey | boolean | false | 是否禁用自定添加 `X-Api-Key` 和 `X-Access-Token` headers |

> 注意，当 `isFormData=true` 且 `body is FormData` 时，默认给 `headers` 添加 `application/x-www-form-urlencoded; charset=UTF-8`。由于部分场景存在 boundary 问题，取消默认添加

## commonRequest

去除 storage 强依赖，用以适配移动端

## fetchEventSource

添加 EventSource 支持

```js
import { fetchEventSource, fes } from '@rayb/ray-fetch/lib/fetchEventSource';

fes({
  url,
  method: 'POST',
  headers,
  body,
  onmessage: (evt) => {},
  onclose: (evt) => {}
});


const controller = new AbortController();
const { signal } = controller;

fetchEventSource(url, {
  signal,
  method,
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({}),
  onmessage,
  onclose
});
```

## 注意

使用 `rayrequest` 进行上传文件时，如果 `headers` 中的 `Content-Type` 不支持，需要自行修改。如：

```js
// FormData 模式下，默认不设置 `Content-Type`
headers={
  'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
```

如果其它 `POST|PUT|DELETE` 请求，无需默认处理 `body`，此时，可设置 `isFormData=true` 将不进行 `JSON.stringify` 处理，headers 中需要自行处理 `'Content-Type'`。

## License

MIT

## changelog

- 20230829 v3.0.0 `change to @rayb/ray-fetch` and add `EventSource`
- 20210319 v2.0.2 `update timeout 30000`