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

左手的ㄟ右手 2021-12-11 02:07 275阅读 0赞

--------------------

**要有遥不可及的梦想，也要有脚踏实地的本事。----------- 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中的登录接口的话，就可以这样写：

<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中的代码就是调取登录接口的代码

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