Vue封装axios请求
为了方便调用api接口，我们封装axios请求
1、在vue项目的src目录下创建api文件夹
并在api文件夹中创建两个两个js文件(http.js、api.js)
http.js文件中写入:
import axios from 'axios'
axios.defaults.baseURL="http://127.0.0.1:8000/"
axios.defaults.timeout = 1000000;
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 = sessionStorage.getItem("jwt_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:8080/#/login"
}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请求 封装axios里的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)
})
}
)
}
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)
})
}
)
}
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_delete,axios_put} from './http.js'
export const login_post = p => axios_post("/myapp/index/",p) //定义路由,post请求
export const login_get = p => axios_get("/myapp/index/",p) //定义路由,get请求
2、在components文件中创建index.vue
3、在index.vue中写入代码(post请求)
<template>
<body>
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button v-on:click="login">登录</button>
</body>
</template>
<script>
import {login_post} from '../api/api'
export default {
name: "index",
data() {
return {
username:'',
password: ''
}
},
methods: {
login:function(){
var data={'username':this.username,'password':this.password}
login_post(data).then( res => {
if(res.code==200){
this.$Message('登录成功')
}else {
this.$Message('登录失败)
}
})
}
}
}
</script>
<style>
</style>
4、在index.vue中写入代码(get请求)
<template>
<body>
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button v-on:click="login">登录</button>
</body>
</template>
<script>
import {login_get} from '../api/api'
export default {
name: "index",
data() {
return {
username:'',
password: ''
}
},
methods: {
login:function(){
var params={'username':this.username,'password':this.password}
login_get(params).then( res => {
if(res.code==200){
this.$Message('登录成功')
}else {
this.$Message('登录失败)
}
})
}
}
}
</script>
<style>
</style>
*** 注:get请求和post请求方式参数不同（前者是params后者是data）**
5、在router文件下的index.js中注册路由
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
var routes = [
{
path:'/',
name:'index',
component:index,
},
]
export default new Router({
routes:routes,
mode:'history' /*hash*/
})
6、启动vue项目就可以了
npm run dev
