溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了Vue2是如何利用Axios發起請求，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
當你看到該文章時希望你已知曉什么是跨域請求以及跨域請求的處理，本文不會贅述
本文后臺基于Springboot2.3進行搭建，Controller中不會寫任何業務邏輯僅用于配合前端調試
Controller中使用的R.success為本人封裝的工具類，代碼在文末
在項目目錄下執行命令安裝axios
npm install -S axios
打開src路徑下的main.js文件，在文件中引入axios依賴并掛載到vue全局屬性中
// 引用axios依賴 import axios from 'axios' // 掛在到vue中，這里將axios掛載為request，在組件中就可以使用this.request來調用axios了 Vue.prototype.request = axios;
發起GET請求調用的是axios中的get方法，點進去可以看到該方法接收了url和config兩個對象
@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請求調用的是axios中的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);
})
},
@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);
})
},
上面說直接使用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對象，可以在node_modules/axios/index.d.ts文件看到該配置的詳細信息：
配置項有很多，我也是個新人好多沒接觸過，這里就簡單測試幾個其他隨時用隨時查，推薦一個Axios中文網
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也屬于比較常用的配置項，用于配置請求的超時時間，單位是毫秒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的值為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后可以試著封裝一個工具類
上述內容就是Vue2是如何利用Axios發起請求，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
