Vue Axios封装
1.初 始vue化项目
vue init webpack deaxios
cd deaxios
npm install axios -S
2.封装axios
2.1 src文件夹下新建http文件夹, 用来放网络请求相关的文件 (个人习惯)
2.2 src/http 文件夹下, 创建 index.js 文件, 对axios进行封装
const axios = require('axios');
axios.defaults.baseURL = 'http://192.168.56.100:8888';
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/json';
axios.defaults.transformRequest = data => JSON.stringify(data);
axios.interceptors.request.use(config => {
let token = localStorage.getItem('token');
token && (config.headers.Authorization = token);
return config;
}, error => {
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
return response.data;
}, error => {
return error
});
export function get(url, params, headers) {
return new Promise((resolve, reject) => {
axios.get(url, {params, headers}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
export function post(url, params, headers) {
return new Promise((resolve, reject) => {
axios.post(url, params, headers).then((res) => {
resolve(res.data)
}).catch((err) => {
reject(err.data)
})
})
}
export default axios;
2.3 src/http 目录下创建 apis.js文件, 用来写 接口地址列表
e
import { get, post } from '刚配的index路径'
export const login = (url,params, headers) => post(url, params, headers)
3.小Demo
<template>
<div>
<h1>测试</h1>
<p><button @click="get_all">获取数据</button></p>
<p><button @click="add_data">增加数据</button></p>
<p><button @click="update_data">修改数据</button></p>
<p><button @click="delete_data">删除数据</button></p>
</div>
</template>
<script>
import {getx,putx,deletex,postx} from "../http/apis";
export default {
name: 'cs',
data() {
return {
msg: '',
}
},
methods: {
get_all(){
getx().then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
add_data(){
let data={"name":"laowang","password":"123","phone":"123"};
postx(data).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
update_data(){
let url='user/user/3/';
let data={name:'小强',phone:123,password:6666};
putx(url,data).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
delete_data(){
let url='user/user/3/';
deletex(url).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
}
},
}
</script>
<style scoped>
</style>