基于axios封装fetch方法及调用

基础axios用法请看axios官网

//依赖于axios对私有ajax进行修改
import Qs from 'qs'
import axios from 'axios'
import router from 'router/index'
import {errorPrompt, loading, closeLoading} from 'util/util'

export const status = {
  SUCCESS: '100',
  NET_ERR: '101',   // 网络连接异常，请稍候再试
  BIZ_ERR: '103', // 业务请求异常
  NO_AUTH: '104'

}

export function fetch(options) {
  return new Promise((resolve, reject) => {
    let instance = axios.create({
      baseURL: process.env.BASE_API,
      timeout: 2000,
      headers: {
        // "tracecode": window.encodeURIComponent(JSON.stringify({"ua":"","cv":"20161230","token":"3dwo0onUUsPKVJcP8tk","os":"windows10","app":"kind","ws":"1*1","pkey":"f8caf7d7-a5d4-4710-b06f-28a922b6a467"}))
        "tracecode": commonBizHeader(isManager(options)),
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      transformRequest: [function (data) {
        // Do whatever you want to transform the data
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }]
    });

    instance.interceptors.request.use(function (response) {
      // 请求拦截
      loading();
      return response;
    }, function (error) {
      console.log('error 请求拦截 : ', error)
      return Promise.reject(error);
    });

    instance(options)
        .then(response => {
          const res = response.data;
          if (res.errorCode != status.SUCCESS) {
            switch (res.errorCode) {
              case status.NET_ERR: {
                errorPrompt(res.errorMsg)
                reject(res)
                break;
              }
              case status.BIZ_ERR: {
                errorPrompt(res.errorMsg)
                reject(res)
                break;
              }
              case status.NO_AUTH: {
                errorPrompt(res.errorMsg)
                let session = require("storejs")
                if (isManager(options)) { // 管理端
                  session.remove("managerUserToken")
                  router.push({path: '/manager/login'})
                } else {
                  session.remove("clientUserToken")
                  router.push({path: '/client/login'})
                }
                reject(res)
                break
              }
            }
          }
          closeLoading();
          resolve(res);
        }).catch(error => {
          closeLoading();
          errorPrompt('网络连接错误，请检查您的网络')
          console.log('error', error); // for debug
          reject(error);
        });
  });
}

function commonBizHeader (isManager) {
  let session = require("storejs");
  let params = {}
  params['ua'] = window.navigator.userAgent.toLowerCase()
  params['cv'] = '123456'
  params['ws'] = window.screen.height + '*' + window.screen.width
  params['token'] = "123456"
  params['os'] = window.navigator.appCodeName
  if (isManager) {
    params['token'] = session.get('managerUserToken') // 管理 - 用户令牌
  } else {
    params['token'] = session.get('clientUserToken') // 用户 - 用户令牌
  }

  params['app'] = 'kind'

  let UUID = session.get('pkey')
  if (!UUID) {
    UUID = getUUID()
    window.localStorage.setItem('pkey', UUID)
  }
  return encodeURIComponent(JSON.stringify(params))
}

function isManager(options) {
  return options && options.url && options.url.indexOf("/api/worker") != -1
}

/**
 * 获取UUID
 * @returns {string}
 */
export function getUUID() {
  let len = 32 // 32长度
  let radix = 16 // 16进制
  let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
  let uuid = []
  let i
  radix = radix || chars.length
  if (len) {
    for (i = 0; i < len; i++) {
      uuid[i] = chars[0 | Math.random() * radix]
    }
  } else {
    var r
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
    uuid[14] = '4'
    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | Math.random() * 16
        uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
      }
    }
  }
  return uuid.join('').toLowerCase()
}

这是在vue的项目中：在api中调用方法如下(react刚开始学，还在做简单demo)

import {fetch} from 'api/fetch'
export const callAuthCode = (userPhone) => {
  return fetch({
    url: '/api/auth/code',
    method: 'post',
    data: ({
      userPhone: userPhone,
    }),
  })
}

因为我们这边的后台要求严格区分get/post请求，所以封装的方法调用中必须带有method,如后台已经处理好，全部可进行post请求，则可以参照axios官网里面将方法全部改为.post
关于fetch方法的说明：主要进行封装了请求拦截，响应拦截，默认请求体由json格式转换form格式，当然，这些都是在axios官网里可以找到的，不过是集合下了而已
关于请求头部分请不要直接套用，这是我们这边后台要求特殊配置的，后台接口三端共用，必须区分是哪里在调用