vue封装axios且实现api的统一管理

一. 安装

// 安装
    cnpm install  axios 

二.封装

在src目录下面新增request文件夹。然后新增api文件夹，存放我们各个模块的api，新增index.js为各个模块api的统一出口。然后新增Http.js封装axios。

Http.js中的代码

import axios from 'axios'
import qs from 'qs'
// element引入
// import ElementUI from 'element-ui'
// 请求超时时间，10s
const timeOut = 10 * 1000
    // 请求域名
const baseurl = 'http://admin.gxxmglzx.com/tender/test'
    // 系统全局请求对象
const service = axios.create({
        baseURL: baseurl,
        timeout: timeOut,
        responseType: 'json'
    })
    // axios拦截器，发送请求之前操作
service.interceptors.request.use(config => {
    // console.log(config)
    return config
})

service.interceptors.response.use(
        response => {
            if (response.status === 200) {
                if (response.data.errcode !== 200) {
                    // ElementUI.Message({
                    //     message: response.data.msg,
                    //     type: 'error'
                    // })
                    return response
                } else {
                    return Promise.resolve(response)
                }
            } else {
                return Promise.reject(response)
            }
        },
        error => {
            if (error.response.status) {
                console.log('进入错误')
                    //   ElementUI.Message({
                    //     message: error.response.data.error,
                    //     type: 'error'
                    //   })
                return Promise.reject(error.response)
            }
        }
    )
    // 请求方法
const http = {
    post(url, params) {
        return service.post(url, params, {
            transformRequest: [(params) => {
                return qs.stringify(params)
            }],
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
    },
    put(url, params) {
        return service.put(url, params, {
            transformRequest: [(params) => {
                return qs.stringify(params)
            }],
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
    },
    get(url, params) {
        let _params
        if (Object.is(params, undefined)) {
            _params = ''
        } else {
            _params = '?'
            for (const key in params) {
                // eslint-disable-next-line no-prototype-builtins
                if (params.hasOwnProperty(key) && params[key] !== null) {
                    _params += `${key}=${params[key]}&`
                }
            }
        }
        return service.get(`${url}${_params}`)
    },
    delete(url, params) {
        let _params
        if (Object.is(params, undefined)) {
            _params = ''
        } else {
            _params = '?'
            for (const key in params) {
                // eslint-disable-next-line no-prototype-builtins
                if (params.hasOwnProperty(key) && params[key] !== null) {
                    _params += `${key}=${params[key]}&`
                }
            }
        }
        return service.delete(`${url}${_params}`)
    },
    upload(url, params) {
        return service.post(url, params, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
    }
}

export default http

home.js中的代码

import $http from '@/request/Http'

const homeApi = {
    getCategroy(params) {
        return $http.get('/get_type', params)
    }
}

export default homeApi

api中的index.js 内容如下，index.js的功能就是统一导出各模块api,这样我们就不用在main.js中一个个去引入了。

/* *
 * api导出
 */

import homeApi from '@/request/api/home'

export default {
    homeApi
}

在main.js中导入api文件夹，并挂载

import api from './request/api/index'

Vue.prototype.$api = api

最后在实际页面的使用

<template>
  <div>
    111
  </div>
</template>

<script>
export default {
  methods: {

  },
  created() {
    this.$api.homeApi.getCategroy().then(res => {
      console.log(res)
    })
  }
}
</script>

<style lang="scss" scoped></style>