axios请求封装

一、引入模块

// axios
import axios from 'axios'
// Qs用来序列化参数
import Qs from 'qs'
// 路由
import router from 'vue-router'
// vuex或者pinia的store
import store from '../store/index'
// ui组件消息通知组件Toast
import { Toast } from 'vant'

二、设置axios的默认配置

// 根据环境配置设置请求基础路径
let urlMap = {
  'development': '/api',
  'debug': '',
  'production': 'http://www.google.com/'
}
let envUrl = process.env.NODE_ENV
axios.default.baseURL = urlMap[envUrl]
// 设置请求超时时间
axios.default.timeout = 10000;
// 设置post请求头
axios.default.header.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

三、配置请求拦截器

axios.interceptors.request.use(
  config => {
    // 判断vuex中或者localStorage是否存在token
    let token = store.state.token || localStorage.getItem('token')
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  }
)

四、配置响应拦截器

axios.interceptors.response.use(
  // 请求正常
  response => {
    if(response.status === 200) {
      return Promise.resolve(response)
    }else {
      return Promise.reject(response)
    }
  },
  // 请求异常
  error => {
    let status = error.response.status
    switch (status) {
      // 未登录
      case 401:
        router.replace({
          path: '/login',
          query: { redirct: router.currentRoute.fullPath }
        })
        break;
      // token过期
      case 403:
        Toast({
          messagae: '登录过期，请重新登录',
          duration: 1000,
          forbidClick: true
        })
        //  清除Token
        localStorage.removeItem('token') && store.commit('removeToken')
        router.replace({
          path: '/login',
          query: { redirct: router.currentRoute.fullPath }
        })
        break;
      // 请求不存在
      case 404:
        Toast({
          messagae: '网络请求不存在',
          duration: 1500,
          forbidClick: true
        })
        break;
      // 其他错误
      default: 
        Toast({
          messagae: error.response.data.messagae,
          duration: 1500,
          forbidClick: true
        })
    }
    return Promise.reject(error.response)
  }
)

封装Post请求

export function post(url, params) {
  return Promise.resolve((resolve, reject) => {
    axios.post(url, Qs.stringify(params))
    .then(res => {
      resolve(res.data)
    })
    .catch(err => {
      reject(err.data)
    })
  })
}