fetch方法封装

fetch提供了简单方便的方法进行跨网络的异步资源请求，可有效替代XMLHttpRequest。本节对fetch方法进行简单的封装，以便于在项目中可以直接方便的调用fetch方法，便于管理一些统一的处理方法。

封装方法

1. 首先新建一个request.js文件，该文件首先实现一个fetch请求函数：

import { message } from 'antd'

export const request = (url, config) => {
  return fetch(url, config).then((res) => {
    if (res.ok) {
      return res.json()
    } else {
      // 服务器异常
      throw Error('')
    }
  }).then((resJson) => {
    return resJson
  }).catch((error) => {
    message.error('errorMessage')
  })
}

2. 在request.js中加入常用的get与post请求函数

export const get = (url) => {
  return request(url, { method: 'GET' })
}

export const post = (url, config) => {
  return request(url, {
    method: 'POST',
    headers: {
      'content-type': 'application/json'
    },
    body: JSON.stringify(config)
  })
}

使用

1. 首先引入上述封装函数

import * as FetchRequest from '../utils/request'

2. 调用

• get调用，只写入url即可

FetchRequest.get('/api/user')

• post调用，写入url以及传入参数

FetchRequest.post('/api/login/account', {password :'888888' , username: 'admin'})

• 常规request方法，上述get与post不满足的可以用该方法，如上述post调用案例用该方法可以写为：

FetchRequest.request('/api/login/account', {
        method: 'POST',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({password :'888888' , username: 'admin'})
      })

参考文献：
MDN Fetch https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
Fetch请求封装 https://zhuanlan.zhihu.com/p/40512216