8 Vue 开发方案

通用需求

---

axios 封装

封装 axios 请求

import axios from 'axios' // 导入 axios

// 第一种: 直接配置在 axios 上(无法配置多个)
axios.defaults.baseURL = 'http://ttapi.research.itcast.cn/'

// 第二种: 使用 create 方法创建一个 axios 实例化对象(能够配置多个)
// 1. 设置基准地址并暴露(request.js)
const request = axios.create({
   
   
  baseURL: 'http://ttapi.research.itcast.cn/' // 基础路径
})
export default request

// 2. 针对不同组件暴露不同的方法(xxx.js)
import request from './request.js'
export const getUserInfoApi = () => {
   
   
  return request({
   
   
    method: 'GET',
    url: '/user'
  })
}

// 3. 集中暴露(index.js)
import {
   
   getUserInfoApi} from './xxx.js'

export default getUserInfoApi = getUserInfoApi

设置 axios 请求/拦截器

import axios from 'axios'
import router from '@/router'
import {
   
    Message } from 'element-ui'
import store from '@/store'
import {
   
    isTimeOut } from '@/utils/auth.js'

const timeOut = 3600 * 1000 // 秒

// 创建 axios 实例对象
const request = axios.create({
   
   
  baseURL: process.env.VUE_APP_BASE_API, // 请求基准地址
  timeout: 10 * 1000 // 请求超时(秒)
})

// 请求拦截器
request.interceptors.request.use(config => {
   
   
  // 判断是否存在 token
  if (store.getters.token) {
   
   
    // 判断时间戳是否过期,如果过期则清空登录信息,返回登录页
    if (isTimeOut(timeOut)) {
   
   
      // 通过判断说明已超时,删除登录信息,主动跳转登录也
      store.dispatch('user/logout') // 清空登录信息
      router.push('/login') // 跳转登录页
      return Promise.reject(new Error('登录超时'))
    }

    config.headers['Authorization'] = `Bearer ${
     
     store.getters.token}` // 将 token 添加到请求头中
  }
  return config // 必须返回请求对象
}, error => {
   
   
  return Promise.reject(error) // 返回错误对象
})

// 响应拦截器
request.interceptors.response.use(response => {
   
   
  const {
   
    success, message, data } = response.data // 解构数据(axios 默认包了一层data)
  // 判断返回状态
  if (success) {
   
   
    return data