vue-axios封装(可直接使用)
http.js
import axios from 'axios';
axios.defaults.baseURL = "http://192.168.56.100:8888"
// 超时时间 /10000毫秒
axios.defaults.timeout = 10000
// post和put请求以json的格式发送
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.headers.put['Content-Type'] = 'application/json'
// 拦截器(中间件)
axios.interceptors.request.use(
config => {
// 路由守卫
// 每次发送请求之前判断是否存在token,如果存在,
// 则统一在HTTP请求的header都加上token,不用每次获取,
// 即使本地token在,也有可能token是过期的,
// 所以在响应拦截器中要对返回状态进行判断
const token = sessionStorage.getItem('jwt_token')
token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.error(error)
}
)
axios.interceptors.response.use(
// 请求成功
res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
// 请求失败
error => {
const { response } = error;
if (response) {
// 请求已发出,但不在2XX范围内
errorHandle(response.status, response.data.message)
return Promise.reject(response)
} else {
// 处理断网的情况
// eg:请求超时或断网时,更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据,会在断网组件中说明
StorageEvent.commit('changeNetwork', false)
}
}
)
export function axios_get(url, params) {
return new Promise(
(resolve, reject) => {
// console.log(params);
axios.get(
url, { params: params }
)
.then(res => {
console.log("封装信息的res:", res);
resolve(res)
}).catch(err => {
reject(err)
})
}
)
}
export function axios_post(url, data) {
return new Promise(
(resolve, reject) => {
console.log(data);
axios.post(
url, JSON.stringify(data) // 将后端传递的数据转换为json的形式
)
.then(res => {
console.log("封装信息的res:", res);
resolve(res.data)
}).catch(err => {
reject(err.data)
})
}
)
}
export function axios_put(url, data) {
return new Promise(
(resolve, reject) => {
console.log(data);
axios.put(
url, JSON.stringify(data)
)
.then(res => {
console.log("封装信息的res:", res);
resolve(res.data)
}).catch(err => {
reject(err.data)
})
}
)
}
export function axios_delete(url, data) {
return new Promise(
(resolve, reject) => {
console.log(data);
axios.delete(
url, { params: data }
)
.then(res => {
console.log("封装信息的res:", res);
resolve(res.data)
}).catch(err => {
reject(err.data)
})
}
)
}
api.js
import { axios_get, axios_post, axios_put, axios_delete } from './http.js'
export const lyt_send_get = l => axios_get("/a2/users/", l)
export const lyt_send_post = l => axios_post("/a2/users/", l)