Vue2利用Axios發(fā)起請(qǐng)求的詳細(xì)過(guò)程記錄

更新時(shí)間：2021年12月26日 12:14:09 作者：Java小學(xué)生丶

有很多時(shí)候你在構(gòu)建應(yīng)用時(shí)需要訪問(wèn)一個(gè)API并展示其數(shù)據(jù),做這件事的方法有好幾種,而使用基于promise的HTTP客戶端axios則是其中非常流行的一種,這篇文章主要給大家介紹了關(guān)于Vue2利用Axios發(fā)起請(qǐng)求的詳細(xì)過(guò)程,需要的朋友可以參考下

前言

當(dāng)你看到該文章時(shí)希望你已知曉什么是跨域請(qǐng)求以及跨域請(qǐng)求的處理，本文不會(huì)贅述

本文后臺(tái)基于Springboot2.3進(jìn)行搭建，Controller中不會(huì)寫(xiě)任何業(yè)務(wù)邏輯僅用于配合前端調(diào)試

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

Axios的安裝和配置

在項(xiàng)目目錄下執(zhí)行命令安裝axios

npm install -S axios

打開(kāi)src路徑下的main.js文件，在文件中引入axios依賴并掛載到vue全局屬性中

// 引用axios依賴
import axios from 'axios'

// 掛在到vue中，這里將axios掛載為request，在組件中就可以使用this.request來(lái)調(diào)用axios了
Vue.prototype.request = axios;

發(fā)起GET請(qǐng)求調(diào)用的是axios中的get方法，點(diǎn)進(jìn)去可以看到該方法接收了url和config兩個(gè)對(duì)象

發(fā)起簡(jiǎn)單GET請(qǐng)求

@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() {
            // 簡(jiǎn)單GET請(qǐng)求只需要傳入U(xiǎn)RL就可以實(shí)現(xiàn)
            this.request.get("http://localhost:8000/user/list").then(res => {
                console.log("res", res);
            }).catch(e => {
                console.log("e", e);
            })
        }
    }
}
</script>
<style></style>

發(fā)起簡(jiǎn)單GET請(qǐng)求并攜帶參數(shù)

@RestController
@RequestMapping("/user")
public class UserController {
    @GetMapping("/get")
    public R get(String id) {
        return R.success("用戶獲取成功！");
    }
}

selectOne() {
    let config = {
        params: {id: "1"}
    }
    // url后面跟上config對(duì)象，config對(duì)象中的params屬性對(duì)應(yīng)的就是請(qǐng)求參數(shù)
    this.request.get("http://localhost:8000/user/get", config).then(res => {
        console.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

發(fā)起POST請(qǐng)求

發(fā)起POST請(qǐng)求調(diào)用的是axios中的post方法，點(diǎn)進(jìn)去可以看到該方法的參數(shù)列表有三個(gè)對(duì)象

發(fā)起簡(jiǎn)單POST請(qǐng)求

@RestController
@RequestMapping("/user")
public class UserController {
    @PostMapping("/save")
    public R save() {
        return R.success("用戶添加成功！");
    }
}

save() {
    // 發(fā)送簡(jiǎn)單POST請(qǐng)求與簡(jiǎn)單GET請(qǐng)求雷同，只需要將get方法修改為post方法即可
    this.request.post("http://localhost:8000/user/save").then(res => {
        console.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

發(fā)起POST請(qǐng)求并攜帶參數(shù)(一)

@RestController
@RequestMapping("/user")
public class UserController {
    /**
     * 一般發(fā)起POST請(qǐng)求都是將參數(shù)放在請(qǐng)求體中，然后在通過(guò)@RequestBody進(jìn)行解析的
     * 這里我就不創(chuàng)建實(shí)體類了，直接使用Map集合來(lái)接收一下
     */
    @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小學(xué)生丶",
        password: "123456789"
    }
    // 當(dāng)看到參數(shù)列表的時(shí)候應(yīng)該就能猜出來(lái)，直接將對(duì)象放在第二個(gè)參數(shù)上就可以
    // 需要注意的是這種方法攜帶的參數(shù)是放在請(qǐng)求體中的
    this.request.post("http://localhost:8000/user/save", data).then(res => {
        console.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

發(fā)起POST請(qǐng)求并攜帶參數(shù)(二)

上面說(shuō)直接使用data傳遞參數(shù)是放在請(qǐng)求體中的，需要后端使用@RequestBody才能取到，這里將參數(shù)改為路徑參數(shù)進(jìn)行提交

@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小學(xué)生丶",
            password: "123456789"
        }
    }
    // 這里不使用data，改用config進(jìn)行傳參，還是將對(duì)象封裝為params進(jìn)行傳遞
    this.request.post("http://localhost:8000/user/save", null, config).then(res => {
        console.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

上傳文件測(cè)試

除開(kāi)GET、POST請(qǐng)求之外，還有PUT、DELETE等等類型的請(qǐng)求，這里就不一一測(cè)試了，來(lái)了解一下上傳文件

@RestController
@RequestMapping("/user")
public class UserController {
    @PostMapping("/upload")
    public R upload(MultipartFile file, String fileName) {
        // file對(duì)象就是接收到的文件，針對(duì)文件的處理邏輯省略不寫(xiě)...
        return R.success("文件上傳成功！")
                .setAttribute("fileName", fileName);
    }

<template>
    <div id="index">
        <!-- input:file 用于選擇文件，選擇文件后觸發(fā)change事件調(diào)用fileChange方法 -->
        <input type="file" id="file" @change="fileChange" />
        <!-- 執(zhí)行上傳文件的方法 -->
        <button @click="upload">點(diǎn)擊上傳</button>
    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            file: null
        }
    },
    methods: {
        fileChange(event) {
            // 當(dāng)選擇了某個(gè)文件后會(huì)觸發(fā)該方法，將文件對(duì)象存放到file中
            this.file = event.target.files[0];
        },
        upload() {
            // 創(chuàng)建一個(gè)FormData對(duì)象，將file放進(jìn)去，也可以放一些其他參數(shù)
            let data = new FormData();
            data.append('file', this.file);
            data.append('fileName', "11223344.txt");
            // 創(chuàng)建config對(duì)象，設(shè)置請(qǐng)求頭類型為multipart/form-data
            let config = {
                headers: {'Content-Type': 'multipart/form-data'}
            }
            // 發(fā)起請(qǐng)求攜帶剛剛創(chuàng)建的對(duì)象
            this.request.post('http://localhost:8000/user/upload', data, config).then(res => {
                console.log("res", res);
            })
        }
    }
}
</script>

Axios的config配置

通過(guò)觀察可以發(fā)現(xiàn)Axios的請(qǐng)求都會(huì)接收一個(gè)config對(duì)象，可以在node_modules/axios/index.d.ts文件看到該配置的詳細(xì)信息：

配置項(xiàng)有很多，我也是個(gè)新人好多沒(méi)接觸過(guò)，這里就簡(jiǎn)單測(cè)試幾個(gè)其他隨時(shí)用隨時(shí)查，推薦一個(gè)Axios中文網(wǎng)

baseURL

baseURL是個(gè)比較常用的屬性，可以針對(duì)每個(gè)請(qǐng)求設(shè)置根地址，我們?cè)诎l(fā)起請(qǐng)求時(shí)只需要關(guān)注請(qǐng)求路徑即可

<script>
export default {
    name: "index",
    data() {
        return {
            config: {
                baseURL: "http://localhost:8000"
            }
        }
    },
    methods: {
        test() {
            let data = {name: "Java小學(xué)生丶"};
            this.request.post("/user/save", data, this.config).then(res => {
                console.log("res", res);
            });
        },
    }
}
</script>

timeout

timeout也屬于比較常用的配置項(xiàng)，用于配置請(qǐng)求的超時(shí)時(shí)間，單位是毫秒ms，設(shè)置為0代表不設(shè)置超時(shí)時(shí)間

<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類型，用于設(shè)置是否允許攜帶Cookie，Axios請(qǐng)求默認(rèn)是不允許攜帶Cookie的，可以通過(guò)Controller打印sessionID進(jìn)行測(cè)試

<script>
export default {
    name: "index",
    data() {
        return {
            config: {
                baseURL: "http://localhost:8000",
                // 需要服務(wù)端進(jìn)行配合
                withCredentials: true,
                timeout: 5000
            }
        }
    },
    methods: {
        test() {
            let data = {name: "Java小學(xué)生丶"};
            this.request.post("/user/save", data, this.config).then(res => {
                console.log("res", res);
            });
        },
    }
}
</script>