CHUANGJA.png
Q.png
- axios的baseURL的理解
- 当url设置的详细的时候,那么baseURL无效
- 当url设置为 /list ,那么实际的url 是： baseURL+ "/list" 注意不能有空格。
下面为全部代码
- axios.js
import axios from 'axios'
import { Message,MessageBox} from 'element-ui'
let servie = axios.create({
baseURL: "基础url", // api的base_url
timeout: 5000
});
servie.interceptors.request.use(config => {
// // /判断请求的是登录还是其他的地址
// if(config.url.indexOf('/login')!=-1){
// //登录接口,不做token信息添加
// }else{
// //非登录接口,为了一些权限接口,做token信息添加
// config.headers.Authorization = window.sessionStorage.getItem('token');
// }
// //返回处理过的axios设置
config.headers = {
"token": '4845816131'
};
return config;
},error => {
Promise.reject(error)
});
servie.interceptors.response.use(
response => {
var res = response.data;
var code = response.data.code;
// console.log(code);
if (code !== 200) {
Message({
message: res.message,
type: 'error',
duration: 3*1000
})
}else {
return response.data;
}
}
)
export default servie; /// 一定要记得导出
- api>login.js
import request from '@/axios/axios'
export function login (www,hhh) {
return request({
// 一个完全的接口
url:'/qq',
method: 'post',
data: {
usr: www,
pass: hhh
}
})
}
-
在组件中引用
组件中引用 -
实现，vue的组件和api的接口调用分离，方便维护。
急.png
logins () {
// 在组件中调用拦截器和响应器 通过.then 的方式拿到 响应器的值 ，再通过这个res的值来进行页面的渲染。
login("用户名", "7412").then(res => {
console.log(res);
});;
},
