GET，POST,DELETE,PUT参数传递的形式

一.get请求参数在地址后面进行拼接

1.代码：

<template><div class=""><button @click="fn">点击</button></div>
</template><script>
import axios from "axios"; //安装完之后，导入axiosexport default {name: "",data() {return {};},methods: {async fn() {const a1 = await axios({url: "https://www.fastmock.site/mock/b96091894e7136caded7b25b8d0cdb4e/tack",method: "get",params: {NAME: 123,AGE: 20,},});},},components: {},// 异步函数返回值为Promise的函数
};
</script><style scoped lang="less"></style>

2.图示:

特点:使用params进行传参，参数在地址后面进行拼接

二.post请求

1.代码

<template><div class=""><button @click="fn">点击</button></div>
</template><script>
import axios from "axios"; //安装完之后，导入axiosexport default {name: "",data() {return {};},methods: {async fn() {const a1 = await axios({url: "https://www.fastmock.site/mock/b96091894e7136caded7b25b8d0cdb4e/tack",method: "post",data: {NAME: 123,AGE: 20,},});},},components: {},// 异步函数返回值为Promise的函数
};
</script><style scoped lang="less"></style>

2.图示:

特点:传递参数的形式是以为请求体的形式进行传递,用data来包裹参数

三.put方法

1.代码

<template><div class=""><button @click="fn">点击</button></div>
</template><script>
import axios from "axios"; //安装完之后，导入axiosexport default {name: "",data() {return {};},methods: {async fn() {const a1 = await axios({url: "https://www.fastmock.site/mock/b96091894e7136caded7b25b8d0cdb4e/tack",method: "put",data: {NAME: 123,AGE: 20,},});},},components: {},// 异步函数返回值为Promise的函数
};
</script><style scoped lang="less"></style>

2.图示:

特点:put方法和psot方法传递参数的方式一样都是包裹在请求体里面的

四.Delete

1.代码

<template><div class=""><button @click="fn">点击</button></div>
</template><script>
import axios from "axios"; //安装完之后，导入axiosexport default {name: "",data() {return {};},methods: {async fn() {const a1 = await axios({url: "https://www.fastmock.site/mock/b96091894e7136caded7b25b8d0cdb4e/tack",method: "delete",params: {NAME: 123,AGE: 20,},});},},components: {},// 异步函数返回值为Promise的函数
};
</script><style scoped lang="less"></style>