超级详细的教程一步步教你Vue项目中使用axios如何进行参数拼接

文章目录

一、Vue 中的网络请求
二、axios的引入
三、常用网络请求方式
- 1、get
- - A、字符串拼接方式：
  - B、通过params属性传递对象：
  - C、路径拼接方式：
  - D、无请求参数：
- 2、post
- - A、Content-Type: application/json
  - - ① 参数直接传递对象：
    - ② 通过data属性传递对象：
  - B、Content-Type: multipart/form-data
  - - ① 文件上传
  - C、Content-Type: application/x-www-form-urlencoded。
- 3、put
- - ① 参数直接传递对象：
  - ② 通过data属性传递对象：
- 4、delete
- - ① 服务端将参数作为java对象来封装接收：
  - ② 服务端将参数作为url参数来接收：
四、说明:发送请求时使用function/箭头函数

一、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, //当前的页数 。默认页码1pageSize: 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: {// 学院idacademyId: "",//课程代码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函数。