目录
参考掘金：https://juejin.im/post/6844903652881072141#heading-8
1.初始化Vue项目
参考博客 ：https://www.cnblogs.com/xiaonq/p/11027880.html
#使用脚手架创建vue项目 deaxios是项目名，随便取
vue init webpack deaxios
cd deaxios #进入项目
npm install axios -S #安装 axios
2.Vue之封装axios
可以参考大佬博客：
https://blog.csdn.net/qq_40128367/article/details/82735310
https://www.cnblogs.com/xiaonq/p/11027880.html
安装
npm install axios --save
为什么要封装axios
- axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。
引入
一般我会在项目的components目录中，新建一个axios_api文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。
在http.js页面添加：
1.环境的切换
- 我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。
import axios from 'axios'
// 环境的切换
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://192.168.56.100:8888/' // 开发环境
} else if (process.env.NODE_ENV === 'debug') {
axios.defaults.baseURL = '' // 调试环境
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = '' // 生产环境
}
axios.defaults.withCredentials = true
//跨域访问需要发送cookie时一定要加axios.defaults.withCredentials = true
2.设置请求超时
- 通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等
axios.defaults.timeout = 1000000;
3.post/put请求头的设置
-
请求头设置
application/x-www-form-urlencoded;charset=UTF-8或application/json -
post/put请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为
application/json
/*
设置请求传递数据的格式(看服务器要求的格式)
x-www-form-urlencoded
默认提交表单
把数据对象序列化成表单数据
*/
// axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded';
// axios.defaults.transformRequest =data=>qs.stringify(data);
/*
设置默认提交json
把数据对象序列化成json字符串
*/
//axios.defaults.headers['Content-Type'] = 'application/json'; //设置默认提交json
//axios.defaults.transformRequest = data => JSON.stringify(data) //把数据对象序列化成json字符串
axios.defaults.headers.post['Content-Type'] =' application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';
4.请求拦截
/*
请求拦截器：发送请求前需要调用这个函数
1.当没有登录时，直接跳转到登录页
2.请求发送前把token获取 设置到header中
*/
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);
});
5.响应拦截
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);
}
});
6.封装get post put delete方法
// 封装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)
})
}
)
}
// 封装xiaos请求 封装axios里的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)
})
}
)
}
// 封装xiaos请求 封装axios里的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)
})
}
)
}
// 封装xiaos请求 封装axios里的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)
})
}
)
}
总结：
axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是，get的第二个参数是一个{}，然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要留意哦！
api.js页面
//将我们http.js中封装好的 get,post.put,delete 导过来
import {axios_get, axios_post, axios_delete, axios_put} from './http.js'
//按照格式确定方法名
export const user_get = p => axios_get("/user/user/", p);
export const add_post1 = p => axios_post("/user/user/", p);
//向后端传输要修改数据的id
export const user_updatad = p => axios_put("/user/user/?id="+p.id, p);
export const del = p => axios_delete("/user/user/", p );
应用到组件
<template>
<div>
<h1>查询数据</h1>
<a>
<button @click="add_post">点击添加</button>
</a>
<div v-for="i in list">
<p>姓名：{{i.name}}
<!--<router-link :to="{'path':'/updated/','query':{'id':i.id}}">点击修改</router-link>-->
<!--<router-link :to="{'path':'/del/','query':{'id':i.id}}">删除</router-link>-->
<a>
<button @click="created(i.id)">修改</button>
</a>
<a>
<button @click="user_del(i.id)">删除</button>
</a>
</p>
<p>年龄：{{i.age}}</p>
<p>家乡：{{i.home}}</p>
<div style="border:1px solid #CCC"></div>
</div>
</div>
</template>
<script>
import {user_get,del} from '../axios_api/api';
export default {
name: "Get",
data() {
return {
list: [],
id: '',
}
},
methods: {
//查询数据
get_data(){
user_get().then(resp => {
this.list = resp;
console.log(resp)
});
},
//点击跳转添加页面
add_post() {
this.$router.push('/post')
},
//点击跳转修改页面
created(id) {
this.$router.push({path: "/updated?id=" + id})
},
//删除
user_del(id){
del({id:id}) .then(resp => {
console.log(resp);
if (resp.code == '200') {
alert('删除成功!!!')
} else {
alert('删除失败---')
}
}).catch(error => {
console.log(error)
})
},
},
//初始化页面后就会执行这个函数
mounted: function () {
this.get_data()
},
created() {}
}
</script>
<style scoped>
</style>