Vue2利用Axios發起請求的詳細過程記錄

Posted on 2021-12-26 by WalkonNet

前言

當你看到該文章時希望你已知曉什麼是跨域請求以及跨域請求的處理，本文不會贅述

本文後臺基於Springboot2.3進行搭建，Controller中不會寫任何業務邏輯僅用於配合前端調試

Controller中使用的R.success為本人封裝的工具類，代碼在文末

Axios的安裝和配置

在項目目錄下執行命令安裝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兩個對象

發起簡單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後可以試著封裝一個工具類

總結

到此這篇關於Vue2利用Axios發起請求的文章就介紹到這瞭,更多相關Vue2用Axios發起請求內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

Vue2利用Axios發起請求的詳細過程記錄

目錄

前言

Axios的安裝和配置

發起簡單GET請求

發起POST請求

發起簡單POST請求

發起POST請求並攜帶參數(一)

發起POST請求並攜帶參數(二)

上傳文件測試

Axios的config配置

baseURL

timeout

withCredentials

總結

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

前言

Axios的安裝和配置

發起簡單GET請求

發起POST請求

發起簡單POST請求

發起POST請求並攜帶參數(一)

發起POST請求並攜帶參數(二)

上傳文件測試

Axios的config配置

baseURL

timeout

withCredentials

總結

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆