文章目錄

• • 一、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函數。

總結

以上是生活随笔為你收集整理的超级详细的教程 一步步教你Vue项目中使用axios如何进行参数拼接的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。