要有遥不可及的梦想,也要有脚踏实地的本事。----------- 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中的代码就是调取登录接口的代码

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

Logo

前往低代码交流专区

更多推荐