封装axios(第一套)

封装一个request.js文件，这个里面是我们的请求拦截器和响应拦截器

import axios from 'axios'
import router from '../router/index'
import { Message, MessageBox } from 'element-ui'
import Utils from '../utils/index'
const baseUrl = 'http://1.1.2.100:12306'
let flag = true
const service = axios.create({
  baseURL: baseUrl,
  timeout: 100000
})

service.interceptors.request.use(config => {
  const token = Utils.getUser('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
    // config.headers.Authorization = token
  }
  // config.data = JSON.stringify(config.data)

  return config
}, error => {
  Promise.reject(error)

})
service.interceptors.response.use(res => {
  // 对响应数据做处理
  if (res.status === 200) {
    if (flag) {
      flag = false
      if (res.data.code === 401) {
        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }
        ).then(() => {
          flag = true
          router.push('/login')
          window.sessionStorage.clear()
          location.reload()
        })
      } else if (res.data.code === 500) {
        flag = true
        Message({
          message: res.data.msg,
          type: 'error',
          duration: 5 * 1000
        })
        location.reload()
      } else {
        flag = true
        return Promise.resolve(res)
      }
    }
  } else {
    flag = true
    return Promise.reject(res)
  }
}, error => {
  // 对响应错误做处理
  console.log(error)
  // switch (error.response.status) {
  //   case 401:
  //     // 对401的操作
  //     break
  //   case 408:
  //     // 对408的操作
  //     break
  //   case 500:
  //     // 对500的操作
  //     break
  //   default: Promise.reject(error)
  // }
})
// 4.导入文件
export default service

封装http.js

// 导入封装好的axios实例
import request from './request'
const http = {
  /**
   * methods: 请求
   * @param url 请求地址
   * @param params 请求参数
   */
  get (url, params) {
    const config = {
      method: 'get',
      url: url
    }
    if (params) config.params = params
    return request(config)
  },
  post (url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.data = params
    return request(config)
  },
  put (url, params) {
    const config = {
      method: 'put',
      url: url
    }
    if (params) config.data = params
    return request(config)
  },
  delete (url, params) {
    const config = {
      method: 'delete',
      url: url
    }
    if (params) config.params = params
    return request(config)
  }
}

// 导出
export default http

封装我们的接口  例如user.js

import http from '../http'
import { praseStrEmpty } from "@/util";
export default {
  // 查询用户列表
  listUser (params) {
    return http.get(`/system/user/list`, params)
  },
  // 查询用户详细
  getUser (userId) {
    return http.get(`/system/user/` + praseStrEmpty(userId))
  },
  // 新增用户
  addUser (params) {
    return http.post(`/system/user`, params)
  },
  // 修改用户
  updateUser (params) {
    return http.put(`/system/user`, params)
  },
  // 删除用户
  delUser (userId) {
    return http.delete(`/system/user/` + userId)
  }
}

// 转换字符串，undefined,null等转化为""
export function praseStrEmpty (str) {
  if (!str || str == "undefined" || str == "null") {
    return "";
  }
  return str;
}

使用方法

import {解构方法进行使用，例如listUser} from '@/api/system/user.js'或者注册到main.js挂在全局