Fetch-vue NPM | npm.io

Fetch-vue

对 axios 做的封装，可以在 vue2.x 和 vue3.x 使用.

使用说明

通过 npm i fetch-vue 引入。为了更好的使用拦截器的特性和增加自定义配置能力，创建独立的文件配置 fetch-vue

创建 fetch.js 文件

import Fetch from 'fetch-vue'

const fetch = new Fetch({
  baseURL: 'https://httpapi-dev.xxxx.net.cn/ka-budget/',
  timeout: 30000,
  // 请求头
  headers: {
    'content-type': 'application/json;charset=utf-8',
    // 请求接口调用TOKEN
    'X-Amz-Security-Token': ''
  },
  /** 自定义配置, 和 具体请求时 传递的 options 会合并到一起 */
  options: {
    key1: 1,
    key2: 1
  },
  /**
   * 请求之前的拦截
   * @param {object} config 合并之后的配置
   * @param {object} customConfig 用户自定义配置
   */
  beforeRequest (config) {
    /** config 中 能够获取到 接口请求时 自定义传入的 options, 在这里可以处理对应的需求 */
    console.log('beforeRequest', config)
    return config
  },
  /**
   * 请求之前的拦截
   * @param {object} res 返回结果
   * @param {object} confg 合并之后的配置
   */
  beforeResponse (res, confg) {
    /** 这里获取到 请求的信息, 一般在这里开始做业务 */
    console.log('beforeResponse', res, confg)
    if (res.data.code !== 200) {
      Promise.reject(res.data.msg)
    }
    return res
  },
  /**
   * 请求之前的拦截
   * @param {any} e 报错信息
   * @param {object} config 合并之后的配置
   */
  responseError (e, config) {
    console.log('responseError', e, config)
  }
})

export default fetch

在 main.js 引入使用

import Vue from 'vue'
import fetch from './plugins/fetch'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
Vue.use(fetch)

在组件中使用

const data = await fetch.post('user/login',
        {userId: 'ming', password: 'P0tIEdrk4Hy21+rEIiwpLA==', key: 'PURLEwtuvcDXNZjF'},
        {quite: true,
          headers: {
            /** 自定义 header 信息 */
          }})