Vue axios封装使用技巧

Vue axios封装使用技巧

技术概述

在使用axios进行前后端通信的时候，会有许多重复的代码，且接口可能在多处被使用，所以对于接口的封装非常有必要。这样在团队协作的过程中就能有效地控制接口的改变。

技术详述

axios接口封装

路径：src/utils/request.js

封装axios的基础url以及请求、响应拦截器

import axios from 'axios'
import { url } from '@/utils/interface.js'

// 1.创建axios实例
const service = axios.create({
  // 公共接口--url = base url + request url
  baseURL: url,
  // 超时时间 单位是ms，这里设置了5s的超时时间
  timeout: 5 * 1000,

})
// 2.请求拦截器request interceptor
service.interceptors.request.use(
  config => {
    ...
  },
  error => {
    return Promise.reject(error)
  }
)
// 3.响应拦截器response interceptor
service.interceptors.response.use(
  response => {
    ...
  },
  error => {
    return Promise.reject(error)
  }
)
export default service

路径：src/api/account.js

引入请求对象，封装login接口提供其他页面调用

import request from '@/utils/request'

/**
 *@functionName: login 
 *@param:  data 登录表单
 *@description: 用户名密码登录
*/
export function login(data) {
    return request({
        url: `/account/login/${data.status}`,   //data.status 是否记住密码 参数
        method: 'post',    //post方法
        data  //post参数
    })
}
/**
 *@functionName: getMailCode 
 *@param:  data 邮箱地址 
 *@description: 获取邮箱验证码
*/
export function getMailCode(params) {
    return request({
        url: '/account/code',
        method: 'get',   //get方法
        params  //get参数
    })
}

路径：views/auth/Login.vue

在具体界面中调用登录接口

<template>
  <div class="login-container">
    <el-card shadow="never" class="login-card">
      <div>
        <el-form:model="ruleForm":rules="rules" ref="ruleForm">
          <el-form-item label="账号" prop="name" class="btn-content">
            <el-input  v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="btn-content">
            <el-input></el-input>
          </el-form-item>
          <el-form-item class="btn-content">
            <el-button class="submit" type="primary" @click="submitForm(ruleform)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { login } from "@/api/auth";   
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        name: "",
        password: "",
        status: true,
      },
    };
  },
  methods: {
    /**
     *@functionName:    submitForm
     *@params: formName 表单名称
     *@description: 提交表单进行登录验证
     */
    submitForm(formName) {
      login(formName)		//在具体页面中调用api中具体接口方法
        .then((response) => {
          //成功处理
        })
        .catch((error) => {
          //失败处理
      })
    },
  },
};
</script>

遇到的问题和解决过程

1. 在请求传参数的过程中，get请求参数无法正确传入

   原因：在接口设置的时候，get方法的参数设置错误

   export function getMailCode(data) {
       return request({
           url: '/account/code',
           method: 'get',   //get方法
           data  //错误参数设置
       })
   }
   
   export function getMailCode(params) {
       return request({
           url: '/account/code',
           method: 'get',   //get方法
           params  //正确get参数
       })
   }
   

   因此在设置请求参数的时候要对应好get和post的参数类型

总结

axios是vue上一个与后端通信非常好用的工具，能够设置相关拦截器进行对请求和响应的更多高级处理，对axios封装接口可以使在页面使用相关接口时更加得受控，同时axios请求是异步返回的处理方式在结合vue的响应式数据时应该多注意异步绑定的问题。

参考资料

Springboot+Vue前后端分离多用户社区项目实战教程

CSDN上有关axios封装以及拦截器的教程