vue的封装
封装的意义
- 提高代码的可读性
- 提高代码的可维护性
- 减少代码的书写
封装
// src/api/http.js
import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8000/"
// axios.defaults.baseURL = "http://172.16.240.175/:8000/"
//全局设置⽹络超时
axios.defaults.timeout = 10000;
//设置请求头信息
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,不⽤每次请求都⼿动添加了
const token = localStorage.getItem("token")
// console.log(token)
if (token) {
config.headers.Authorization = 'JWT ' + token
}
return config;
},
error => {
return Promise.error(error);
})
axios.interceptors.response.use(
// 请求成功
// res => res.status === 200 ? Promise.resolve(res) :
Promise.reject(res),
res => {
if (res){
//加上201的原因是因为:modelviewset的post请求添加成功后返回的状态码是201
if(res.status === 200 || res.status === 201){
return Promise.resolve(res);
}
}
},
// 请求失败
error => {
if (error.response) {
// 判断⼀下返回结果的status == 401? ==401跳转登录⻚⾯。 !=401passs
// console.log(error.response)
if (error.response.status === 401) {
// 跳转不可以使⽤this.$router.push⽅法、
// this.$router.push({path:'/login'})
window.location.href = "http://127.0.0.1:8888/"
} else {
// errorHandle(response.status, response.data.message);
return Promise.reject(error.response);
}
// 请求已发出,但是不在2xx的范围
} else {
// 处理断⽹的情况
// eg:请求超时或断⽹时,更新state的network状态
// network状态在app.vue中控制着⼀个全局的断⽹提示组件的显示隐藏
// 关于断⽹组件中的刷新重新获取数据,会在断⽹组件中说明
// store.commit('changeNetwork', false);
return Promise.reject(error.response);
}
});
// 封装xiaos请求
// 封装get请求
export function axios_get(url, params) {
return new Promise(
(resolve, reject) => {
axios.get(url, { params: params })
.then(res => {
// console.log("封装信息的的res", res)
resolve(res.data)
}).catch(err => {
reject(err.data)
})
}
)
}
// 封装post请求
export function axios_post(url, data) {
return new Promise(
(resolve, reject) => {
// console.log(data)
axios.post(url, JSON.stringify(data))
.then(res => {
// console.log("封装信息的的res", res)
resolve(res.data)
}).catch(err => {
reject(err.data)
})
}
)
}
// 封装put请求
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)
})
}
)
}
// 封装delete请求
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 => {