Vue项目axios封装

request.js封装axios

import axios from 'axios'
const request = axios.creat({
  baseURL: 'https://......'
  timeout: 5000
})
//request拦截
request.interceptor.request.use(
  config => {
    //获取header
    const header = JSON.parse(window.localStorage.gerItem('header'))
    //header存在，每次请求需传入header
    if (header)
      config.headers = header
    return config
  },
  error => {
    return Promise.reject(error)
  }
),
//response拦截
request.intercepetor.response.use(
  response=>{
    //定义code==403为登录过期，需回到首页重新登录
    if (response.data.code == 403){
      重新登录时清除旧header
      window.localStorage.removeItem('header')
      window.location.href = '/'
    }
    return response
  },
  error => {
    return Promise.reject(error)
  }
)
export default request

api.js中 axios的使用

import request from '@/utils/request.js'
export const selectFinanceProject = (data) => {
     return request({
        url: 'finance/selectFinanceProject',
        method: 'put',
        data
    })
}
export const getLogInfo = (params, data) => {
    return request({
        url: 'webJournal/selectByGsIdAndScreen',
        method: 'put',
        params,
        data
    })
}

页面中调用接口

import { selectFinanceProject , getLogInfo } from "@/api.js";
export default {
  mounted(){
    this.queryLogeInfoList()
  }
  methods: {
    //请求数据
    queryLogeInfoList () {
      let data={} 
      getLogInfo(data).then(res=>{
        ......
      })
    }
  }
}