技术概述

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

技术详述

axios接口封装

src/utils/request.js

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

import axios from ‘axios‘
import store from ‘@/store‘
import { Message, MessageBox } from ‘element-ui‘
import { url } from ‘@/utils/interface.js‘
import { getToken } from ‘@/utils/auth‘

// 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参数
    })
}

遇到的问题和解决过程

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封装以及拦截器的教程

Vue axios封装使用技巧