fetchie

enhanced fetch api

Author: Ash Zhang

基本用法

import fetchie from 'fetchie';

支持的方法：get、post、put、del（delete）、head

最后必须用.then才会正式发出请求

fetchie
  .get('/gifts')
  .then(function (res) {
    console.log(this.toString(), res);
  });

.query(params)

以下请求会转化成：/gift?pageNum=1&pageSize=16

fetchie
  .get('/gifts')
  .query({
    pageNum: 1,
    pageSize: 16
  })
  .then(function (res) {
    console.log(this.toString(), res);
  });

.send(data)

发送 json 数据

fetchie
  .post('/gifts')
  .send({
    name: 'New Gift'
  })
  .then(function (res) {
    console.log(this.toString(), res);
  });

.append(name, file, fileName)

添加文件，用在 then 之前，send 之后

 fetchie
    .post('/post')
    .send({
      pageNum: 1,
      pageSize: 16
    })
    .append('file', file, file.name)
    .then(function (res) {
      console.log('File sent:', res);
    })

.set(header)

添加 header

.setType(contentType)

设置 Content-Type，支持json、html、text或xml

.accept(type)

设置 Accept

.cors(needCors)

是否需要跨域

.prefix(host)

为 url 添加前缀，以下请求的 url 是：//localhost:9090/gifts

fetchie
  .get('/gifts')
  .prefix('//localhost:9000')
  .then(function (res) {
    console.log(this.toString(), res);
  });

.timeout(ms)

设置超时（毫秒）

.handleError(cb)

处理请求的错误返回，必须在 then 之前

fetchie
  .get('/gifts')
  .handleError(function (error) {
    console.error(error);
  })
  .then(function (res) {
    console.log(this.toString(), res);
  });

全局设置

.use(middleware)

用 use 添加全局的 middleware

fetchie
  .use(function () {
    this.prefix('//localhost:9000');
  })
  .use(function () {
    this.timeout(1000);
  })
  .use(function () {
    this.cors(true);
  })

所有的请求都会添加前缀、跨域、并在 1 秒内 timeout

.success(cb) 和 .error(cb)

全局性的成功和失败回调

fetchie
  .success(function (res) {
    if (res && res.success === false) {
      throw res;
    }
  })
  .error(function (error) {
    console.error('Global Error:', this.toString(), error);
  });

Mock 数据

可以添加本地 mock，配合 hot-loader 实现即时刷新的数据 mock，非常方便

import fetchie, { fetchMock } from 'fetchie';
import mockData from './mock-data.json';
 
fetchie
  .use(fetchieMock(mockData))

mock-data.json 的格式如下：路径-请求方法-数据

路径的格式和 express 相同

{
  "gifts/:id?": {
    "get": [
      {
        "id": 1,
        "name": "Gift 1"
      },
      {
        "id": 2,
        "name": "Gift 2"
      }
    ],
    "post": {
      "name": "$$name$$"
    },
    "put": {
      "id": 3
    },
    "error": {
      "error": true
    }
  }
}

也可以用函数

{
  "gifts/:id?": {
    get(query, param) {
      if (param.id) {
        return         {
          "id": param.id,
          "name": "Gift 1"
        };
      }
 
      return [
        {
          "id": 1,
          "name": "Gift 1"
        },
        {
          "id": 2,
          "name": "Gift 2"
        }
      ];
    }
  }
}

注：error 下为请求错误时的返回数据，要 mock 一个错误回调，只需插入一个.mockError()：

fetchie
  .get('/gifts')
  .query({
    pageNum: 1,
    pageSize: 16
  })
  .mockError()
  .then(function (res) {
    console.log(this.toString(), res);
  });