Axios

安装

yarn add axios -S

请求服务封装

src/services/request.js

//引入axios异步请求插件
import axios from 'axios'

let cancel ,promiseArr = {}

const CancelToken = axios.CancelToken;

//请求拦截器
axios.interceptors.request.use(config => {
    //发起请求时，取消掉当前正在进行的相同请求
    if (promiseArr[config.url]) {
        promiseArr[config.url]('操作取消')
        promiseArr[config.url] = cancel
    } else {
        promiseArr[config.url] = cancel
    }
      return config
}, error => {
    return Promise.reject(error)
})

//响应拦截器即异常处理
axios.interceptors.response.use(
  response => {
      // return response
      return response.data
  }, 
  err => {
      if (err && err.response) {
        switch (err.response.status) {
          case 400:
            err.message = '错误请求'
            break;
          case 401:
            err.message = '未授权，请重新登录'
            break;
          case 403:
            err.message = '拒绝访问'
            break;
          case 404:
            err.message = '请求错误,未找到该资源'
            break;
          case 405:
            err.message = '请求方法未允许'
            break;
          case 408:
            err.message = '请求超时'
            break;
          case 500:
            err.message = '服务器端出错'
            break;
          case 501:
            err.message = '网络未实现'
            break;
          case 502:
            err.message = '网络错误'
            break;
          case 503:
            err.message = '服务不可用'
            break;
          case 504:
            err.message = '网络超时'
            break;
          case 505:
            err.message = 'http版本不支持该请求'
            break;
          default:
            err.message = `连接错误${err.response.status}`
        }
      } else {
        err.message = "连接到服务器失败"
      }
      console.log(err.message)
      return Promise.resolve(err.response)
  }
)

//请求的默认前缀 只要是发出去请求就会 默认带上这个前缀
axios.defaults.baseURL = '/api'

//设置默认请求头 异步的
axios.defaults.headers = {
    'X-Requested-With': 'XMLHttpRequest'
}

//设置超时请求时间
axios.defaults.timeout = 10000

//get请求
let GET = (data = {}) => {
  return new Promise((resolve,reject) => {
    axios({
      method: 'get',
      url:data.url,
      params: data.params,
      cancelToken: new CancelToken(c => {
        cancel = c
      })
    }).then(res => {
      resolve(res)
    })
  })
}

//post请求
let POST = (data = {}) =>
{
  return new Promise((resolve,reject) => {
    axios({
      method: 'post',
      url:data.url,
      data:data.params,
      cancelToken: new CancelToken(c => {
        cancel = c
      })
    }).then(res => {
      resolve(res)
    })
  })
}

// 文件上传请求
let UPLOAD = (data = {}) =>
{
  //封装表单数据对象
  var RequestData = new FormData()

  if(JSON.stringify(data.params) !== "{}")
  {
    for(var key in data.params)
    {
      RequestData.append(key, data.params[key])
    }
  }

  return new Promise((resolve,reject) => {
    axios({
      method: 'post',
      url:data.url,
      data:RequestData,
      headers:{'Content-Type': 'multipart/form-data'},
      cancelToken: new CancelToken(c => {
        cancel = c
      })
    }).then(res => {
      resolve(res)
    })
  })
}


export {
  GET,
  POST,
  UPLOAD
}

总入口文件

src/api/index.js

// 引入每个目录下面的index.js文件
const ModulesFile = require.context('./',true,/index.js$/)

//接口集合
var ApiList = {}

ModulesFile.keys().reduce((modules, modulePath) => {
  //文件名
  const ModuleName = modulePath.replace(/^.\/(.*)\.js/,'$1')

  //不包含当前index.js 文件
  if(ModuleName !== 'index')
  {
    //请求列表
    const ModuleList = ModulesFile(modulePath)

    //合并对象 循环多次合并
    ApiList = Object.assign(ApiList,ModuleList.default)
  }

  return ApiList
}, {})

//导出接口集合
export default ApiList

每个目录下的入口文件

src/api/user/index.js

// 引入目录下的所有js文件
const ModulesFile = require.context("./", false, /.js$/);

//接口集合
const ApiList = {};

ModulesFile.keys().reduce((modules, modulePath) => {
    // 文件名
    const ModuleName = modulePath.replace(/^.\/(.*)\.js/, "$1");

    // 不包含当前index.js 文件
    if (ModuleName !== "index") {
        // API请求列表
        const ModuleList = ModulesFile(modulePath);

        // 合并对象 循环多次合并
        Object.assign(ApiList, ModuleList.default);
    }

    return ApiList;
}, {});

//导出接口集合
export default ApiList;

每个目录下的其他接口文件

src/api/user/base.js

//引入封装的请求服务
import { POST, UPLOAD } from '@/services/request.js'

//导出接口
const base = {
  register(data = {})
  {
    return POST({
      url: '/user/base/register',
      params: data
    })
  },
  login(data = {})
  {
    return POST({
      url: '/user/base/login',
      params: data
    })
  },
  profile(data = {})
  {
    return UPLOAD({
      url:'/user/base/profile',
      params: data
    })
  }
}

export default base

定义全局API变量

src/index.js

//加载接口
import api from './api/index.js'

//设置为全局变量
React.$api = api

在业务中使用

  //组装数据
  var data = {
    email: '123123@qq.com',
    password: 123123
  }
  const logins = async() => {
    var result = await React.$api.login(data)
  }