复杂封装,包含提示和状态码的,点击这里查看
以下是简单封装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 然后调用上面封装的axiosconfig = config || {}config.url = urlconfig.method = 'get'config.params = datareturn axios.request(config)
}$http.delete = function(url, data, config) {config = config || {}config.url = urlconfig.method = 'delete'config.params = datareturn axios.request(config)
}$http.post = function(url, data, config) {config = config || {}config.url = urlconfig.method = 'post'config.data = datareturn axios.request(config)
}$http.put = function(url, data, config) {config = config || {}config.url = urlconfig.method = 'put'config.data = datareturn axios.request(config)
}export { axios, $http }