axios封装
@
1. 封装axios请求
初始化vue项目
vue init webpack deaxios # 使用脚手架创建项目
cd deaxios # 进入项目
npm install axios --save # 安装axios
1. 封装axios
- 1.1 在main.js 文件引入axios
// 引入axios
import axios from 'axios';
Vue.prototype.axios = axios;
- 1.2 src文件夹下新建https文件夹，用来放网络请求相关的文件
- 1.2 scr/https文件夹下，创建http.js文件，对axios进行封装
import axios from 'axios'
// axios.defaults.baseURL = "http://127.0.0.1:8000/"
axios.defaults.baseURL = "http://192.168.56.100: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),
// 请求失败
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 => {
reject(err.data)
})
}
)
}
export default axios; // 一定要导出函数
- 1.3src/https目录下创建api.js文件，用来写接口地址列表
/*eslint-disable*/
// 将我们http.js中封装好的 get，post，put，delete 导过来
import { axios_get, axios_post, axios_delete, axios_put} from './http.js'
export const set_get = p => axios_get('/app01/goods/', p)
export const set_post = p => axios_post('/app01/goods/', p)
export const set_delete = p => axios_delete('/app01/goods/'+ p.id, p)
export const set_put = (data, params) => axios_put('/app01/goods/'+params.id+"/", data, params)
- 1.4 src下得.vue文件下导入
import {set_get, set_post, set_delete, set_put, set_get1} from '../http/api';
- 1.5vue页面下导入axios函数
<script>
// 导入axios函数
import {set_get,} from '../https/api.js'
export default {
data() {
return {
users: [],
flag: ""
}
},
mounted() {
this.common()
},
methods: {
common() {
// 直接使用导入的axios函数
set_get({"flag":this.flag}).then(res => {
console.log(res)
this.users = res
}).catch(err => {
console.log(err)
})
},
},
