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分析完毕