vue中使用axios封装接口，对api统一管理

---

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

---

1.首先先安装axios

npm install axios -S

2.安装成功后，在src目录下新建一个axios文件夹，用来存放封装接口的js文件,

    在axios/axios.js文件中写入代码：

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
//这里柚子引入的是element-ui中的提示框和加载框，用其他ui组件的要换一下
import { Message, Loading } from 'element-ui'
// 响应时间
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 静态资源
Vue.prototype.$static = ''
// 配置接口地址
//这里的接口地址是你地址的相同的前半部分，方便管理
axios.defaults.baseURL = 'http://******************'
var loadingInstance
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(
    config => {
        loadingInstance = Loading.service({
            lock: true,
            text: '数据加载中，请稍后...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        })
        if (config.method === 'post') {
            config.data = qs.stringify(config.data)
        }
        return config
    },
    err => {
        loadingInstance.close()
        Message.error('请求错误')
        return Promise.reject(err)
    }
)
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
    res => {
        loadingInstance.close()
        return res
    },
    err => {
        loadingInstance.close()
        Message.error('请求失败，请稍后再试')
        return Promise.reject(err)
    }
)
// 发送请求
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .post(url, params)
            .then(
                res => {
                    resolve(res.data)
                },
                err => {
                    reject(err.data)
                }
            )
            .catch(err => {
            })
    })
}
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params
            })
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                
            })
    })
}

3.封装的部分写完之后，就是对api的统一管理了，在src目录下新建api文件夹，其中创建api.js 和 index.js 两个文件

    api.js中是对接口的统一管理，写入代码：

import { post } from '../axios/axios.js'//引入封装的文件中的post方法
import { get } from '../axios/axios.js'//引入封装的文件中的get方法
export default {
    //登录接口，params是接口所需参数，‘api/v2/auth’是接口地址中不同的后半部分
    //注：此接口是get请求接口，post请求，只需要将return get()换成return post()即可
    login(params) {
        return get('api/v2/auth', params)
    }
}

    index.js文件是引入的api.js方便我们全局引入，写入代码：

import user from './api.js'
export default {
  user
}

4.最后我们在main.js中全局引入api/index.js

// 引入api目录下的index.js
import api from './api/'

//再将api挂载到vue的原型上就可以使用了
Vue.prototype.$api = api

5.到此封装和api的管理就告一段落了，下面可以直接在页面中使用，比如在页面中调用刚刚的api.js中的登录接口的话，就可以这样写：

login.vue

<el-button class="login" type="primary" @click="login">登录</el-button>
//登录按钮，点击登录按钮触发事件：
methods: {
    login() {
      if(this.username == ''){
        this.$message({
          showClose: true,
          message: '请输入用户名',
        });
      }else if(this.password == ''){
        this.$message({
          showClose: true,
          message: '请输入密码',
        });
      }else{

        //配置登录接口所需要的参数：

        var params = {
          db: 'zjnf5',
          login: this.username,
          password: this.password
        }
        
        //登录接口：

        this.$api.user.login(params)
          .then(res=>{
              //这里放接口通了之后你需要的一些逻辑
              console.log(res)
          })   

      }
    }
  },

   注：else中的代码就是调取登录接口的代码

好了，就是这些了，如果还有不明白的可以在下面回复我，共同讨论解决方案，希望能帮助到一些朋友！！！