axios封装及使用

 

一、新建文件夹axios，在文件夹中新建文件index.js和http.js

(1) index.js

// 倒入所有接口
import apiList from './http'

const install = Vue => {
  if (install.installed) return
  install.installed = true

  Object.defineProperties(Vue.prototype, {
    // 注意哦，此处挂载在 Vue 原型的 $api 对象上
    $http: {
      get () {
        return apiList
      }
    }
  })
}

export default install

(2) http.js

import axios from 'axios'
import { router } from '@/router'
import store from '../store'

// 设置api访问基路径
axios.defaults.baseURL = 'http://' + store.state.domain

axios.defaults.headers.post['Content-Type'] = 'application/json'  // 设置数据传输方式
axios.defaults.timeout = 100000  // 设置请求超时为10秒

// request 拦截器
axios.interceptors.request.use(
  config => {
    let token = store.state.token
    // let tokenState = store.state.tokenState
    // 1. 请求开始的时候可以结合 vuex 开启全屏 loading 动画
    // console.log(token)
    // console.log('准备发送请求...')
    // console.log(tokenState)
    // 2. 带上token
    if (token) {
      config.headers.Authorization = 'Bearer ' + token
      // console.log(config.headers.Authorization)
    }
    // if(tokenState) {
    //   // 重定向到登录页面
    //   console.log("999999999999999999999999")
    //   console.log(tokenState)
    //   router.push('/login')
    // }
    // 3. 根据请求方法，序列化传来的参数，根据后端需求是否序列化
    if (config.method === 'post') {
      config.data = JSON.stringify(config.data)
    }
    // console.log(config)
    return config
  },
  error => {