Axios请求封装

在vue2中使用Axios进去异步请求获取数据，我们可以通过对axios实例进行配置来实现对请求的统一拦截和响应处理。

一、Axios请求拦截处理

// request.js

import axios from 'axios'
// import store from '@/store'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import notification from 'ant-design-vue/es/notification'

// 创建 axios 实例
const request = axios.create({
  // API 请求的默认前缀
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 1000 * 60 * 10 // 请求超时时间
})

// 异常拦截处理器
const errorHandler = (error) => {
  if (error.response) {
    const data = error.response.data
    // 对请求状态统一处理
    if (error.response.status === 401) {
      notification.warning({
        message: '授权验证失败',
        description: '请重新登录'
      })
      storage.clearAll()
      window.location.reload()
      return new Promise(() => {})
    }
    if (error.response.status === 404) {
      notification.warning({
        title: '不存在该页面',
        message: data.msg
      })
      return new Promise(() => {})
    }
    // ...其他状态处理
  }
  return Promise.reject(error)
}

// request interceptor 请求拦截
request.interceptors.request.use(config => {
  const token = storage.get(ACCESS_TOKEN)
  // 如果 token 存在
  // 让每个请求携带自定义 token 请根据实际情况自行修改
  if (token) {
    config.headers['Authorization'] = token
  }
  return config
}, errorHandler)

// response interceptor 请求响应
request.interceptors.response.use((response) => {
  return response.data
}, errorHandler)

export default request

二、接口分类

对于项目中不同模块的接口，可以专门创建对应的接口处理文件来进行分类处理，这样在调用时只需关注调用哪个接口和传什么参数就行了。在项目中统一在api文件下进行处理接口。

├── src
│   ├── api                  # Api ajax请求处理
│   │   ├── public.js        # 公共接口
│   │   └── empower.js       # 登录接口

// empower.js

// 引入request.js进行统一处理
import request from '@/utils/request'

// 接口地址
const api = {
  login: '/api/login', // 登录
  userInfo: '/api/userInfo', // 获取用户信息
  logout: '/api/logout' // 退出登录
}

// 登录
export function loginApi(parameter) {
  return request({
    url: api.login,
    method: 'post',
    data: parameter
  })
}

// 获取用户信息
export function userInfoApi(parameter) {
  return request({
    url: api.userInfo,
    method: 'get',
    params: parameter
  })
}

// 退出登录
export function logoutApi(parameter) {
  return request({
    url: api.logout,
    method: 'post',
    data: parameter
  })
}

三、使用

<script>
/**
 * @description 登录页面
 * @author changz
 * */

import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'

// 引入接口地址
import { loginApi } from '@/api/empower'

export default {
  name: 'Empower',
  data() {
    return {
      codeLoad: false,
      submitLoad: false,
      pwdType: false,
      formData: {
        phone: '',
        password: '',
        code: '',
        key: '',
        verifyImg: '',
        login_type: 2 // 1、管理端登录 2、客户端登录
      }
    }
  },
  methods: {
    // 登录
    submitForm() {
      const { phone, password, code, key, login_type } = this.formData
      const params = {
        phone,
        password,
        code,
        key,
        login_type
      }
      this.submitLoad = true
      loginApi(params)
        .then(res => {
          this.submitLoad = false
          if (res.code !== 200) {
            this.$notification.warning({
              message: '错误',
              description: res.msg
            })
            return
          }
          const { token } = res.data
          storage.set(ACCESS_TOKEN, token, 7 * 24 * 60 * 60 * 1000)
          this.$message.success('登录成功')
        })
        .catch(err => {
          this.submitLoad = false
          this.$notification.warning({
            message: '错误',
            description: err.message
          })
        })
    }
  }
}
</script>