mjFetch

基于fetch的资源请求库 功能点如下：

1. 支持基本请求方法， get/post/put/delete 方法
2. 支持超时请求配置 timeout
3. 快捷方式调用 get, post,form
4. 支持多种请求参数方式如下：

import mjFetch from 'mj-fetch';
mjFetch.get('your request url', data, ...options)
mjFetch.get({url: 'your request url', data, ...options})

5. 支持请求结果处理中间件封装fetch

import { MjFetchApi } from 'mj-fetch';
const middlewares1 = (response) => {
  if (response.code !== 0) {
    response.message = "登录失败";
    return response
  } 
  return response
}
const myFetch = new MjFetchApi({ middlewares: [middlewares1]})
myFetch.get(...)
myFetch.post(...)

6. mj-fetch 暴露了一个MjFetchApi的接口，可用于自定义实例化对象 (v1.1.2 +)

const myFetch = new MjFetchApi({
    headers: { 'Authorization': "xm_token" },
    timeout: '6000', // 设置统一超时
    middlewares: [...middlewares],
    before: () => {}, // 请求前置回调，如开启loading效果
    after: () => {},  // 请求后置回调，如关闭loading效果
})

7. 支持修改请求调用前config的配置。 （v.1.2.0 +）

   注意。当使用before修改请求参数时，需返回新的参数对象，方可生效。当使用before 做loading等其他操作时，不需要返回参数对象。

const apiPrefix = {dev: 'https://www.t-example.com', prd: 'https://www.example.com'}
const ENV = 'dev';
// 例如，原请求参数 { method: 'GET', data: {id: 2}, url: '/api/example' }
const myFetch = new MjFetchApi({
    ...
    before: (v) => ({...v, url: `${apiPrefix[ENV]}${v.url}`}),
// 参数 v 就是原请求参数
// 返回新参数为：{method: 'GET', data: {id: 2}, url: 'https://www.t-example.com/api/example'}
})

问题修复：

》通过new MjFetchApi({ header: {'Authorization': 'xm'} })方式配置统一配置header。会出现header中key对应的value值被追加到值序列的尾部。（1.3.0已修复）

安装

  npm install mj-fetch

使用

// 基本用法
import mjFetch from 'mj-fetch';

mjFetch.fetch({
  url: 'your request url',
  method: 'GET', // POST
  data: {
    name: 'xm',
  },
  timeout: 1000, // 超时请求设置，单位毫秒
}).then((res) => {
  console.log('...')
})

// get请求 配置方式
mjFetch.get({
  url: '',
  headers: {},
  data,
  ...
})
// get请求 传参方式
mjFetch.get(url, data, config)

// post请求
mjFetch.post({
  url: '',
  headers: {},
  data,
  ...
})

// post请求 传参方式
mjFetch.post(url, data, config)

// 完整参数方式
mjFetch.fetch({
  url: 'your request url',
  method: 'GET', // POST
  header: {},
  mode,
  withCredentials: true,  // 开启 cookie 头部授权
  credentials: true, // 发送凭证方式
  data: {
    name: 'xm',
  },
  before: () => {}, // 请求前置回调，如开启loading效果
  after: () => {},  // 请求后置回调，如关闭loading效果
})

快速使用 get/post/form 方法

// Get 请求：
  mjFetch
    .get('your request url').then((res) => {
    console.log('res', res)
  })
// 带query参数的 get 请求
    mjFetch
      .get('your request url', data).then((res) => {
        console.log('res', res)
      })

// POST 请求
    mjFetch
      .post('your request url', data).then((res) => {
        console.log('res', res)
      })

// 文件上传
  const fd = new FormDate();
  mjFetch
    .form('your request url', fd)
    .then(...)
    
// 文件下载 (v1.2.0+)
  myFetch.get('/api/download', data).then(response => response.blob()).then(blob => {
    const url = window.URL.createObjectURL(new Blob([blob]));
    const a = document.createElement('a');
    a.href = url;
    const now = moment();
    a.download = `${now.format("YYYY-MM-DD")}_${now.millisecond()}.xlsx`;
    a.click();
  })

默认暴露的 mj-Fetch 实例方法

import mjFetch, { MjFetchApi } from "mjFetch";

• mjFetch.get
• mjFetch.post
• mjFetch.form
• mjFetch.fetch

示例代码

NodeTest_Mjfetch