Vue项目中配置axios

安装

安装axios插件

npm install axios

安装qs插件

npm install qs

在main.js中声明

import Apis from './api/index.js'
Vue.use(Apis)

http文件

import axios from 'axios'
import { message } from 'ant-design-vue'
import qs from 'qs'

/*
* 提示函数
* @param {String} content 提示的内容
* @param {Number} duration 提示窗口显示的时间，默认1500ms
* */
const tip = (content, duration = 2) => {
  message.error(content, duration)
}

/*
* 请求失败后的统一处理, 错误提示
* @params {Object} error
*
* */

const errorHandler = (error) => {
  console.log('Error', error)
  if (error.response) {
    const { status, statusText } = error.response
    switch (status) {
      case 400:
        tip(`${status}: 参数错误!`)
        break
      case 401:
        tip(`${status}: 未登录!`)
        break
      case 403:
        tip(`${status}: 登录过期!`)
        break
      case 404:
          tip(`${status}: 请求的资源不存在!`)
        break
      default:
        if (status >= 500) {
            tip(`${status}: ${statusText}`)
        }
    }
  } else if (error.request) {
    console.log(error.request)
  } else {
    if (error.message.indexOf('timeout') > -1) {
      tip('请求超时，请重试！', 1)
    }
  }
}

// axios实例
const axiosIns = axios.create({
  timeout: 1000 * 100,
  responseType: 'json'
})

// 请求拦截器
axiosIns.interceptors.request.use(function (config) {
  return config
}, function (error) {
  errorHandler(error)
  Promise.reject(error)
})

// 响应拦截器
axiosIns.interceptors.response.use(function (response) {
  const { status, data } = response
  if (status === 200) {
    return data
  } else {
    return Promise.reject(data)
  }
}, function (error) {
  errorHandler(error)
  Promise.reject(error)
})

// ajax请求
export default function ajax (url, method = 'GET', data = {}, requestOptions = {}) {
  const methodUpper = method.toLowerCase()
  const options = {
    url,
    method: methodUpper,
    ...requestOptions
  }
  if (url.includes('/grib')) {
    data = qs.stringify(data)
  }
  switch (methodUpper) {
    case 'get':
    case 'delete':
      options.params = data
      break
    case 'post':
    case 'put':
    case 'patch':
      options.data = data
      break
    default:
      break
  }

  return axiosIns(options)
}

接口文件处配置

index.js内容

import Vue from 'vue'
/*
* 1. 引入各个模块下的api请求，api请求按照模块功能划分
* 2. 各个模块下js文件名为命名空间,
* 3. 在组件中使用api： this.$api[js文件名][文件内导出的api请求]
* */
const apis = {}
const moduleContext = require.context(
  './modules/',
  false,
  /\.js$/
)
moduleContext.keys().forEach(key => {
  const name = key.split('/') // ./test.js
    .pop() // test.js
    .replace(/\.\w+$/, '') // test
  apis[name] = moduleContext(key)
})

export default {
  install () {
    Vue.prototype.$api = apis
  }
}

示例layer接口文件中的内容，我的这个文件是存放关于图层的接口的，所以命名为layer.js
里面的内容是

import http from '@/util/http'

// 查询
export async function query (table, params) {
  const defaultParams = {
    limit: 100000
  }
  return await http(`/api/feature/${table}/query`, 'POST', {
    ...defaultParams, ...params
  })
}

使用处调用

就可以调用了

      this.$api.layer.query({ table, params }).then(res => {
        console.log(res)
      })