调试vuex

封装axios

yarn add axios

  1. import axios from 'axios'
  2. import store from '@/store'
  3. import router from '@/router'
  5. // baseURL设置/超时时间设置
  6. const instance = axios.create({
  7.   baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  8.   timeout: 5000
  9. })
  11. // 添加请求拦截器
  12. instance.interceptors.request.use(function (config) {
  13.   // 1. 获取token
  14.   const { token } = store.state.user.profile
  15.   // 2. 请求头设置token
  16.   if (token) {
  17.     config.headers.Authorization = `Bearer ${token}`
  18.   }
  19.   return config
  20. }, function (error) {
  21.   // 对请求错误做些什么
  22.   return Promise.reject(error)
  23. })
  25. // 添加响应拦截器
  26. instance.interceptors.response.use(function (response) {
  27.   return response.data
  28. }, function (error) {
  29.   // 对响应错误做点什么
  30.   if (error.response && error.response.status === 401) {
  31.     const redirectUrl = encodeURIComponent(router.currentRoute.value.fullPath)
  32.     router.push('/login?redirectUrl=' + redirectUrl)
  33.   }
  34.   return Promise.reject(error)
  35. })
  37. /**
  38.  * @param {String} - url  请求地址
  39.  * @param {String} - method  请求类型
  40.  * @param {Object} - submitData  对象类型，提交数据
  41.  */
  42. const request = (url, method, submitData) => {
  43.   return instance({
  44.     url,
  45.     method,
  46.     [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  47.   })
  48. }
  50. export default request