复杂封装,包含提示和状态码的,点击这里查看
以下是简单封装axios的request.js文件:
import axios from 'axios'
import router from './../router'
import { Message } from 'element-ui'
// 设置axios全局默认的BASE-URL, 只要设置了全局的默认base_url,以后的请求会自动拼接上base_url
// -------------------------------注意改成自己的公共url------------------------------------
axios.defaults.baseURL = 'http://192.168.1.194/gateway'
axios.defaults.timeout = 10000
// 配置axios的请求拦截器-(每次在请求头上携带后台分配的token-后台判断token是否有效等问题)
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
// console.log('请求到了哟', config.headers.Authorization)
// 如果有其他的特殊配置 只需要判断config参数 设置即可
// 标识系统为AJAX请求
config.headers['X-Requested-With'] = 'XMLHttpRequest'
// 统一的给config设置 token-------------------------------注意获取方法------------------------------------
// config.headers.Authorization = JSON.parse(localStorage.getItem('token'))
config.headers['Token'] = '3d2eec53c6f74f43a85e8df083d9bf84'
return config
}, error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 响应拦截器 与后端定义状态是100时候是错误 跳转到登录界面
axios.interceptors.response.use(response => {
// 对响应数据做点什么
console.log('接口success', response)
// 当返回信息为未登录或者登录失效的时候重定向为登录页面
if (
response.data.status == 100 ||
response.data.message == '用户未登录或登录超时,请登录!'
) {
localStorage.removeItem('token')
router.push({
path: '/login',
querry: { } // 从哪个页面跳转
})
Message.warning(response.data.message)
}
return response.data
}, error => {
console.log('接口error', error)
// 对响应错误做点什么
return Promise.reject(error)
}
)
const $http = {}
$http.get = function(url, data, config) {
// 这一步把api方法里的 地址 参数 配置传入进来 配置到config 然后调用上面封装的axios
config = config || {}
config.url = url
config.method = 'get'
config.params = data
return axios.request(config)
}
$http.delete = function(url, data, config) {
config = config || {}
config.url = url
config.method = 'delete'
config.params = data
return axios.request(config)
}
$http.post = function(url, data, config) {
config = config || {}
config.url = url
config.method = 'post'
config.data = data
return axios.request(config)
}
$http.put = function(url, data, config) {
config = config || {}
config.url = url
config.method = 'put'
config.data = data
return axios.request(config)
}
export { axios, $http }