1. 新建api文件 --> 新建reques.js文件
import axios from 'axios'
import {
Message,
Loading
} from 'element-ui'
import router from '../router/index.js' //注意路径与文件名
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 50000 // request timeout
})
let loading // 定义loading变量
function startLoading () { // 使用Element loading-start 方法
loading = Loading.service({
lock: true,
text: '加载中...',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading () { // 使用Element loading-close 方法
loading.close()
}
// 请求拦截 设置统一header
service.interceptors.request.use(
config => {
// 加载
startLoading()
if (localStorage.eleToken) {
config.headers.Authorization = localStorage.eleToken
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截 401 token过期处理
service.interceptors.response.use(
response => {
endLoading()
return response
},
error => {
// 错误提醒
endLoading()
Message.error(error.response.data)
const { status } = error.response
if (status === 401) {
Message.error('token值无效,请重新登录')
// 清除token
localStorage.removeItem('eleToken')
// 页面跳转
router.push('/login')
}
return Promise.reject(error)
}
)
export default service
在request.js中做了三件事
创建axios,设置baseURL与超时时间
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 50000 // request timeout
})
拦截请求
service.interceptors.request.use(
config => {
// 加载
startLoading()
//此处可统一设置请求头 ....
return config
},
error => {
return Promise.reject(error)
}
)
拦截响应
service.interceptors.response.use(
response => {
endLoading()
return response
},
error => {
// 错误提醒
endLoading()
Message.error(error.response.data)
//此处可对状态码做一个判断
// 跳转回登录界面
//router.push('/login')
}
return Promise.reject(error)
}
)
2.新建api.js 引入request文件
//api.js
import request from '@/utils/request'
export default {
api名(接口参数) {
return request.get(接口地址与字段)
},
}
3.新建index.js文件 引入axios、vue与api.js文件
添加对应实例 可用this.$引用
import axios from "axios"
import Vue from "vue"
import dataTableApi from "./dataTable/dataTableApi"
Vue.prototype.$http = {...dataTableApi}
Vue.prototype.$axios = axios
4.在组件中 通过this.$http.接口名(参数名) 即可调用