當你看到該文章時希望你已知曉什么是跨域請求以及跨域請求的處理，本文不會贅述
本文后台基於Springboot2.3進行搭建，Controller中不會寫任何業務邏輯僅用於配合前端調試
Controller中使用的R.success為本人封裝的工具類，點擊這里可查看代碼
Axios的安裝和配置
在項目目錄下執行命令安裝axios
// npm install為安裝命令，-S參數同--save一致，作用為將安裝的依賴保存到package.json中，axios為安裝的目標依賴
npm install -S axios
打開src路徑下的main.js文件，在文件中引入axios依賴並掛載到vue全局屬性中
// 引用axios依賴
import axios from 'axios'
// 將axios掛載到vue中，這里起名(隨意)為request，在組件中就可以使用this.request來使用axios了
Vue.prototype.request = axios;
發起GET請求
發起GET請求調用的是axios中的get方法，點進去可以看到該方法接收了url和config兩個對象
發起簡單GET請求
@RestController
@RequestMapping("/user")
public class UserController {
@GetMapping("/list")
public R list() {
return R.success("用戶列表查詢成功！");
}
}
<template>
<div id="index">
<button @click="selectList">查詢用戶</button>
</div>
</template>
<script>
export default {
name: "index",
methods: {
selectList() {
// 簡單GET請求只需要傳入URL就可以實現
this.request.get("http://localhost:8000/user/list").then(res => {
console.log("res", res);
}).catch(e => {
console.log("e", e);
})
}
}
}
</script>
<style></style>
發起簡單GET請求並攜帶參數
@RestController
@RequestMapping("/user")
public class UserController {
@GetMapping("/get")
public R get(String id) {
return R.success("用戶獲取成功！");
}
}
selectOne() {
let config = {
params: {id: "1"}
}
// url后面跟上config對象，config對象中的params屬性對應的就是請求參數
this.request.get("http://localhost:8000/user/get", config).then(res => {
console.log("res", res);
}).catch(e => {
console.log("e", e);
})
},
發起POST請求
發起POST請求調用的是axios中的post方法，點進去可以看到該方法的參數列表有三個對象
發起簡單POST請求
@RestController
@RequestMapping("/user")
public class UserController {
@PostMapping("/save")
public R save() {
return R.success("用戶添加成功！");
}
}
save() {
// 發送簡單POST請求與簡單GET請求雷同，只需要將get方法修改為post方法即可
this.request.post("http://localhost:8000/user/save").then(res => {
console.log("res", res);
}).catch(e => {
console.log("e", e);
})
},
發起POST請求並攜帶參數(一)
@RestController
@RequestMapping("/user")
public class UserController {
/**
* 一般發起POST請求都是將參數放在請求體中，然后在通過@RequestBody進行解析的
* 這里我就不創建實體類了，直接使用Map集合來接收一下
*/
@PostMapping("/save")
public R save(@RequestBody Map<String, String> data) {
return R.success("用戶添加成功！")
.setAttribute("name", data.get("username"))
.setAttribute("pwd", data.get("password"));
}
}
save() {
let data = {
username: "Java小學生丶",
password: "123456789"
}
// 當看到參數列表的時候應該就能猜出來，直接將對象放在第二個參數上就可以
// 需要注意的是這種方法攜帶的參數是放在請求體中的
this.request.post("http://localhost:8000/user/save", data).then(res => {
console.log("res", res);
}).catch(e => {
console.log("e", e);
})
},
發起POST請求並攜帶參數(二)
上面說直接使用data傳遞參數是放在請求體中的，需要后端使用@RequestBody才能取到，這里將參數改為路徑參數進行提交
@RestController
@RequestMapping("/user")
public class UserController {
@PostMapping("/save")
public R save(String username, String password) {
return R.success("用戶添加成功！")
.setAttribute("name", username)
.setAttribute("pwd", password);
}
}
save() {
let config = {
params: {
username: "Java小學生丶",
password: "123456789"
}
}
// 這里不使用data，改用config進行傳參，還是將對象封裝為params進行傳遞
this.request.post("http://localhost:8000/user/save", null, config).then(res => {
console.log("res", res);
}).catch(e => {
console.log("e", e);
})
},
上傳文件測試
除開GET、POST請求之外，還有PUT、DELETE等等類型的請求，這里就不一一測試了，來了解一下上傳文件
@RestController
@RequestMapping("/user")
public class UserController {
@PostMapping("/upload")
public R upload(MultipartFile file, String fileName) {
// file對象就是接收到的文件，針對文件的處理邏輯省略不寫...
return R.success("文件上傳成功！")
.setAttribute("fileName", fileName);
}
<template>
<div id="index">
<!-- input:file 用於選擇文件，選擇文件后觸發change事件調用fileChange方法 -->
<input type="file" id="file" @change="fileChange" />
<!-- 執行上傳文件的方法 -->
<button @click="upload">點擊上傳</button>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
file: null
}
},
methods: {
fileChange(event) {
// 當選擇了某個文件后會觸發該方法，將文件對象存放到file中
this.file = event.target.files[0];
},
upload() {
// 創建一個FormData對象，將file放進去，也可以放一些其他參數
let data = new FormData();
data.append('file', this.file);
data.append('fileName', "11223344.txt");
// 創建config對象，設置請求頭類型為multipart/form-data
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
// 發起請求攜帶剛剛創建的對象
this.request.post('http://localhost:8000/user/upload', data, config).then(res => {
console.log("res", res);
})
}
}
}
</script>
Axios的config配置
通過觀察可以發現Axios的請求都會接收一個config對象，可以在node_modules/axios/index.d.ts文件看到該配置的詳細信息：
配置項有很多，我也是個新人好多沒接觸過，這里就簡單測試幾個其他隨時用隨時查，推薦一個Axios中文網
baseURL
baseURL是個比較常用的屬性，可以針對每個請求設置根地址，我們在發起請求時只需要關注請求路徑即可
<script>
export default {
name: "index",
data() {
return {
config: {
baseURL: "http://localhost:8000"
}
}
},
methods: {
test() {
let data = {name: "Java小學生丶"};
this.request.post("/user/save", data, this.config).then(res => {
console.log("res", res);
});
},
}
}
</script>
timeout
timeout也屬於比較常用的配置項，用於配置請求的超時時間，單位是毫秒ms，設置為0代表不設置超時時間
<script>
export default {
name: "index",
data() {
return {
config: {
baseURL: "http://localhost:8000",
timeout: 5000
}
}
},
methods: {
test() {
let data = {name: "張涵哲"};
this.request.post("/user/save", data, this.config).then(res => {
console.log("res", res);
});
},
}
}
</script>
withCredentials
該屬性同樣比較常用，withCredentials的值為bool類型，用於設置是否允許攜帶Cookie，Axios請求默認是不允許攜帶Cookie的，可以通過Controller打印sessionID進行測試
<script>
export default {
name: "index",
data() {
return {
config: {
baseURL: "http://localhost:8000",
// 需要服務端進行配合
withCredentials: true,
timeout: 5000
}
}
},
methods: {
test() {
let data = {name: "Java小學生丶"};
this.request.post("/user/save", data, this.config).then(res => {
console.log("res", res);
});
},
}
}
</script>
Axios暫時就寫到這里，了解這些日常開發基本不成問題了，用熟config后可以試着封裝一個工具類