axios的基本配置使用以及登录注册时候遇到的问题
话不多说，贴上代码，一般都是新建一个api，写入接口的js代码，不同类型的接口写不同类型的js文件内，方便管理维护
接口js
import axios from 'axios' //引入axios
import Cookies from 'js-cookie' //引入js-cookie
axios.defaults.baseURL='http://127.0.0.1:8000/'; //配置基本的后台接口路径
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded'; //header配置
if (Cookies.get('token')) {// 判断是否存在token，如果存在的话，则每个http header都加上token，因为作者使用的是JWT用户认证模式
axios.defaults.headers.common['Authorization'] =`JWT ${Cookies.get('token')}`;
}
axios的get，拉取数据
//拉取热搜关键词
export const getSearchHot= (parms) => {
return new Promise((resolve, reject) => {
axios.get('/api/searchHot/' + parms).then(res=>{ //get后面跟的请求地址
resolve(res)})
.catch(error=>{reject(error)});
})
};
axios的post，发送数据
//发送相册图片
export const postAlbum= (parms) => {
return new Promise((resolve, reject) => {
axios.post('/api/album/',parms).then(res=>{
resolve(res)})
.catch(error=>{reject(error)});
})
};
axios的put，更新数据
//更新用户个人信息
export const updateUser= (parms) => {
return new Promise((resolve, reject) => {
axios.put('/api/user/1/',parms).then(res=>{
resolve(res)})
.catch(error=>{reject(error)});
})
};
axios的delete，删除数据
//删除文章
export const deleteArticle= (parms) => {
return new Promise((resolve, reject) => {
axios.delete('/api/article/' + parms +'/').then(res=>{
resolve(res)})
.catch(error=>{reject(error)});
})
};
比方说是最上面第一个获取热搜关键词的接口的使用，首先引入接口
import {getSearchHot} from "../api/article";
然后在methods中定义一个方法来获取这个接口的数据
methods:{
getHotSearchList(){
getSearchHot(‘’).then(res=>{
console.log(res.data); //这里是拉取正确情况下的接口数据的，你可以console.log(res.data)，查看后台发送过来的数据
}).catch(error=>{
console.log(error.data); //如果接口访问出错，上面的res.data则不会有，返回的只有这里的error.data，你可以看到后台发送过来的错误提示
})
},
}
然后注册了接口的使用方法，自然是要调用拉，你可以在created生命周期中调用这个方法
created(){
this.getHotSearchList();
},
不过有一个坑，当我用户退出然后登录别的账号时，发现请求来的信息还是之前的那个账户，自己明明更新了store中的token以及cookie中的token，可是请求的时候还是之前的账号，想来想去，明白了原因，因为请求头塞的还是之前的token，所以，在登录注册之后，需要将请求头更新一下，（由于我注册之后是直接将token后台传过来的，直接注册等于已经登录了，无需用户注册之后再自行登录）。以下是我的代码，在登录成功了只有将res.data中的token直接更新到请求头中。
login(vm.ruleForm).then(res=>{
NProgress.done();
Cookies.remove('token');
Cookies.set('token',res.data.token,{expires:7, path:'' });
// getUser('').then(res=>{
// console.log(res.data);
// vm.SET_header_image(res.data.header_image);
// });
// vm.SET_token(Cookies.get('token'));
axios.defaults.headers.common['Authorization'] =`JWT ${res.data.token}`;
vm.$router.push('/');
}).catch(error=>{
NProgress.done();
vm.loginButtonText='快速登录';
vm.$message.error('登录失败！');
})
