2021SC@SDUSC
目录
本文不再分析页面代码,前文已经分析了一个页面,由于很多组件都是共享的,其他页面使用了相同的组件,可供分析的代码就少了很多。本文开始分析项目中的js文件,着重分析url的生成与发送。
js文件在src/api下
url生成
axios请求
首先看axios.js文件
import axios from 'axios';
import {Message, MessageBox} from 'element-ui';
第一行代码引入了axios,使得我们可以在vue中使用axios发送异步请求。
关于axios的用法:
get请求demo:
<!--引入axios的相关依赖-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//get方式请求
//then代表请求响应回来时触发的回调函数,response代表响应内容,包括相应数据response.data,响应的状态码response.status,响应头response.headers等等
axios.get('http://localhost:8888/axios/findAll?username=zhangsan&password=123')
.then(function(response){
console.log(response.data);
})
.catch(function(err){ //当请求出现错误时回调函数
console.log(err);
});
</script>
post请求demo:
<!--引入axios的相关依赖-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//post请求
axios.post('http://localhost:8888/axios/save',{name:"zhangsan",age:23}).then(function (response) {
console.log(response.data);
}).catch(function (err) {
console.log(err);
});
</script>
第二行代码
import {Message, MessageBox} from 'element-ui';
意思是引入element-ui的MessageBox组件,MessageBox组件用于显示提示信息等。
接着看源码:
axios.defaults.baseURL = process.env.BASE_API
const service = axios.create({
withCredentials: false,
timeout: 60000,
headers: {
'Content-Type': 'application/json',
}
})
axios.defaults.baseURL = process.env.BASE_API 用于给axios请求指定默认的baseURL,这里指定的是process.env.BASE_API变量,这个变量在dev.env.js中,源码如下:
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://localhost:9095"'
//BASE_API: '"http://10.108.26.197:9095"'
})
可以看到这里指定了baseURL为:
http://localhost:9095
接着代码中定义了一个service变量。这里定义了axios发送请求时的一系列配置,配置的含义如下:
1. withCredential等于false表示发送的请求不允许携带cookie。
2. timeout表示请求的超时时间
3. headers表示设置默认的请求头,在这里设置了一个Content-Type。axios的header默认的Content-Type是'application/json;charset=UTF-8',在本项目中都是用json格式传输,所以修改为application/json
get请求拦截器
接下来我们看下get请求的配置:
service.interceptors.request.use(
config => {
return config
},
error => {
// Do something with request error
Promise.reject(error)
}
)
这是一个get请求的拦截器。 这个拦截器会在我们发送请求之前运行。在这里get请求的拦截器啥也没有。
post请求拦截器
post的拦截器就比较复杂了,源码如下:
service.interceptors.response.use(
response => {
const res = response.data;
if (res.code == 200) {
return res
} else if (res.code == '50014') {
MessageBox({
message: "当前登录已失效或异地登录,请重新登录",
type: 'error',
duration: 3 * 1000,
}).then(() => {
sessionStorage.clear();
localStorage.clear();
window.location.href = "/";
}).catch(err => {
})
} else if (res.code == "3100" || res.code == "3101") {
return res;
} else {
Message({
message: res.repMsg || res.message,
type: 'error',
duration: 3 * 1000
})
return res;
}
},
error => {
var errorStatus = error.response.code;
var errorData = error.response.data;
var messageTxt = "";
if (errorStatus != 200) {
messageTxt = "服务器内部错误,请联系管理员";
} else {
messageTxt = '失败原因:' + errorData.code + '--' + errorData.repMsg;
}
Message({
message: messageTxt,
type: 'error',
duration: 5 * 1000
})
}
)
我们分析一下post拦截器的流程:
如果是有返回的response,执行流程如下:
1. 首先判断状态码,如果是200,就直接返回res给前端。
2. 如果不是200,说明有错误,接着判断是否等于50014,这个50014是我们自定义的状态码,用于表示登录超时或者被登出。会弹出一个MessageBox弹窗。接着通过:
window.location.href = "/";
来跳转到登录界面。
3. 如果不是50014,就会判断是不是3100或者3101,如果是就直接返回res,这里的状态码我不知道代表什么含义,感觉直接返回res的话可以在判断200的时候一并判断了。
4.如果上面的情况都不是,就弹出来一个error弹窗。
如果没有返回的response,直接error,则执行流程如下:
1. 通过:
var errorStatus = error.response.code; var errorData = error.response.data;
来更新errorStatus和errorData。
2. 如果状态码不等于200,说明是服务器内部错误,将“服务器内部错误,请联系管理员”赋值给messageText。
3. 如果状态码等于200,则说明error数据中有失败原因,就把失败的原因赋值给messageText。
4. 弹窗出失败原因或者服务器状态。
关于export default service
export default{}这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export ,在文件 B 中引入 import ,把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
在axios.js文件的末尾,就使用了:
export default service
来使得其他页面能够复用此文件。
至此,axios.js分析完毕