一、Vue 中的网络请求
在Vue.js中发送网络请求本质还是Ajax，我们可以使用插件方便操作。
①vue-resource：Vue.js的插件，已经不维护，不推荐使用。
②axios:不是vue的插件，可以在任何地方使用，推荐使用。
说明：axios既可以在浏览器端又可以在node.js中使用的发送http请求库，支持Promise语法，不支持jsonp请求（jsonp是解决跨域的）。如果遇到jsonp请求，可以使用插件jsonp实现。
二、axios的引入
① npm i axios
② script src =“cdn 加载”
③script src="./axios.main.js"
引入axios.main.js
三、常用网络请求方式
1、get
get请求方式将需要入参的数据作为 params 属性的值，最后整体作为参数传递。若没有请求参数，则可省略params属性。
接口：
data属性中封装的对象：
//查询所有课程信息的参数对象-简单搜索
queryCourseInfo: {
name: "", //课程名称
pageNum: 1, //当前的页数 。默认页码1
pageSize: 10 //当前每页显示多少条数据。默认每页显示数量10
},
上面接口发送请求以及参数拼接可以有以下方式：
A、字符串拼接方式：
A、 this.$axios
.get(
"/itoo-teach/teach/queryCourseInfoByName?name=" +
this.queryCourseInfo.name +
"&pageNum=" +
this.queryCourseInfo.pageNum +
"&pageSize=" +
this.queryCourseInfo.pageSize
)
.then(res => {
if (res.data.code != "0000") {
return this.$message.error("查询失败");
}
this.courseList = res.data.data.list;
this.total = res.data.data.total;
});
接收到的返回参数res包含的内容如下：
等同于下面的方式：
B、 const {
data: res } = await this.$axios.get(
"/itoo-teach/teach/queryCourseInfoByName?name=" +
this.queryCourseInfo.name +
"&pageNum=" +
this.queryCourseInfo.pageNum +
"&pageSize=" +
this.queryCourseInfo.pageSize
);
if (res.code != "0000") {
return this.$message.error("查询失败");
}
this.courseList = res.data.list;
console.log(res);
this.total = res.data.total;
变量res解构内容如下（将上方中的res.data进行解构，得到data属性中的内容）：
B、通过params属性传递对象：
A、 this.$axios
.get("/itoo-teach/teach/queryCourseInfoByName", {
params: this.queryCourseInfo
})
.then(res => {
if (res.data.code != "0000") {
return this.$message.error("查询失败");
}
this.courseList = res.data.data.list;
console.log(res);
this.total = res.data.data.total;
});
【params: this.queryCourseInfo 或者为：】
this.$axios
.get("/itoo-teach/teach/queryCourseInfoByName", {
params: {
name:this.queryCourseInfo.name,
pageNum:this.queryCourseInfo.pageNum,
pageSize:this.queryCourseInfo.pageSize,
}
})
.then(res => {
if (res.data.code != "0000") {
return this.$message.error("查询失败");
}
this.courseList = res.data.data.list;
console.log(res);
this.total = res.data.data.total;
});
接收到的返回参数res包含内容如下：
B、 const {
data: res } = await this.$axios.get(
"/itoo-teach/teach/queryCourseInfoByName",
{
params: this.queryCourseInfo
}
);
if (res.code != "0000") {
return this.$message.error("查询失败");
}
this.courseList = res.data.list;
console.log(res);
this.total = res.data.total;
变量res解构内容如下（将上方中的res.data进行解构，得到data属性中的内容）：
C、路径拼接方式：
接口：
上面接口中的请求参数name需要的类型是path，在url中的呈现的形式是：“接口/参数值”。
async isExistByName() {
const {
data: res } = await this.$axios.get(
"/itoo-teach/teach/isExistByName/（最后的“/”为url后面需要拼接的参数，将url与参数分隔。或者写成下面的形式）" + this.addCourseList.name（拼接的变量为 你需要传递的参数值）
);
const {
data: res } = await this.$axios.get(
"/itoo-teach/teach/isExistByName"+“/” + this.addCourseList.name
);
if (res.code != "0000") {
alert("该课程名称已存在，请勿重复添加！");
return;
}
},
D、无请求参数：
没有请求参数的get请求，直接写需要请求的ur即可：
//查询机构信息（学院信息）-lz-2020年6月18日18点39分
async getInstitutionList() {
const {
data: res } = await this.$axios.get(
"/itoo-teach/teach/queryAllInstitution"
); //无请求参数，直接写url即可。
if (res.code != "0000") {
return this.$message.error("查询失败！");
} else {
this.institutionNameOptions = res.data;
}
},
2、post
A、Content-Type: application/json
json类型，headers里面设置’Content-Type’: ‘application/json; charset=utf-8’，这种形式的请求，我们只需要在axios的data属性中传递Object对象（参数作为请求体）即可。
接口：
//data属性中定义的对象变量：
//表单信息添加/修改
addCourseList: {
// 学院id
academyId: "",
//课程代码
code: "",
//课程名称
name: "",
//课程类型
courseType: "",
//课程类别
courseCategory: "",
//课程性质
courseNature: "",
//所属学院
institutionName: "",
//学时
classHour: "",
//学分
classPoint: "",
//课程分数
score: ""
},
① 参数直接传递对象：
//添加信息
const {
data: res } = await this.$axios.post(
"/itoo-teach/teach/create",
this.addCourseList 【使用data属性中封装好的对象】
);//body请求体 携带参数数据
if (res.code != "0000") {
return this.$message.error("提交课程信息失败！");
}
this.$refs.addCourseRef.resetFields();
this.addDialogVisible = !this.addDialogVisible;
this.getCourseList();
});
② 通过data属性传递对象：
// 请求体 data属性中携带参数对象
const {
data: res } = await this.$axios.post(
"/itoo-teach/course/create",
{
data: {
courseModel: this.addCourseList }
}
);// courseModel见接口需要的实体参数，保持一致。
headers请求体中包含的内容如下：
B、Content-Type: multipart/form-data
form-data类型，headers里面设置’Content-Type’: ‘multipart/form-data’，使用data属性直接传递Object对象即可。
① 文件上传
接口：
实现文件的上传：使用的是Element ui组件库中的upload组件
<el-upload
:action="actionUrl"
......【其余配置项略...】
</el-upload>
data 中配置地址：
actionUrl: process.env.VUE_APP_Back + "itoo-teach/course/importCourse", //上传文件url
//方式为post请求。使用组件上传，组件中已经为我们封装好了请求体部分--默认的参数是file，
//上方接口中的请求参数为file才可以，否则前端传递的参数是file，
//后端参数如果不是file（比如是mf）,后端参数 mf 与 前端参数 file 不对应，则文件将传不过去。
headers请求体中包含的内容如下：
C、Content-Type: application/x-www-form-urlencoded。
目前这种情况在开发中还没有遇到过，所以下方图片并不为亲测，而是来源于网络。如果后面的开发中遇到这种情况，再进行更新…
3、put
put请求与上面的post请求中json（上面的2-A情况）请求格式类似。
接口：
① 参数直接传递对象：
const {
data: res } = await this.$axios.put(
"/itoo-teach/teach/modify",
this.addCourseList
);//请求参数封装在body请求体里
if (res.code != "0000") {
return this.$message.error("修改课程信息失败！");
}
this.$refs.addCourseRef.resetFields();
this.addDialogVisible = !this.addDialogVisible;
this.getCourseList();
});
},
② 通过data属性传递对象：
const {
data: res } = await this.$axios.put(
"/itoo-teach/teach/modify",
{
data: {
courseModel: this.addCourseList }
}
);//请求参数封装在body请求体里
if (res.code != "0000") {
return this.$message.error("修改课程信息失败！");
}
this.$refs.addCourseRef.resetFields();
this.addDialogVisible = !this.addDialogVisible;
this.getCourseList();
});
},
4、delete
① 服务端将参数作为java对象来封装接收：
delete请求方式:（1）如果服务端将参数作为java对象来封装接收，将需要入参的数据作为 data 属性的值，最后整体作为参数传递；
② 服务端将参数作为url参数来接收：
delete请求方式:（2）如果服务端将参数作为url参数来接受，则请求的url为:www.demo/url?a=1&b=2形式，使用patams传递参数。
【***使用data还是params属性，看url地址是否有参数拼接。或者看接口，如果参数是body的形式，则使用data属性传递对象】
接口：
//根据所选课程ids，提交要删除的课程-lz-2020年6月11日16点40分
async submitDeleteCourse() {
const {
data: res } = await this.$axios.delete(
"/itoo-teach/teach/deleteByIds",
{
data: this.ids
}
);//delete需要data属性携带参数，body请求实体
console.log("批量删除状态码为：" + res.code);
if (res.code != "0000") {
return this.$message.error("删除课程信息失败！");
}
this.getCourseList();
},
四、说明:发送请求时使用function/箭头函数
如果在vue中使用axios发送请求，你在.then/.catch的回调函数中使用了箭头函数，那么this指向当前的组件实例。如果回调函数使用的是function函数，那么this指向undefined…
使用function函数时，vue中data中的数据无法通过this直接引用，需要做如下处理:var _this（vm）=this,先保存一下当前的this，即作用域为全局对象，否则this在function函数中指向当前对象，这样的话，在this处(this.$emit…)会发生错误 undefined.
或者写成箭头函数的形式：
上面两种方式都可以成功发送请求，不过，使用箭头函数不支持async函数。
