get、delete、head请求只有两个参数,请求参数是放在第二个参数config中,post、put、patch请求有3个参数,请求参数是放在第二个参数data中的。
-
get和delete请求,请求参数格式是query格式,参数是在url后通过“&”拼接
-
get请求,参数放在config中的params中
axios.get('url地址', {
params: {
id: 12121,
name: 'huahua'
- delete请求, 参数放在config中的data中
axios.delete('url地址', {
data: {
id: 12121,
name: 'huahua'
- post、put、patch的请求,请求参数是放在请求体中的(实际项目只是用到了post,其他2种没有用过)
axios.post('url地址', {
id: 12121,
name: 'huahua'
- 同时发生的请求 使用axios.all和axios.spread
mounted() {
axios.all([this.getListOne(), this.getListTwo()]).then(axios.spread((dataOne, dataTwo) => {
console.log(dataOne)
console.log(dataTwo)
}))
methods: {
getOneList() {
return axios.get('/getListOne')
getTwoList() {
return axios.get('/getListTwo')
vue axios请求方式和传参格式get、delete、head请求只有两个参数,请求参数是放在第二个参数config中,post、put、patch请求有3个参数,请求参数是放在第二个参数data中的。get和delete请求,请求参数格式是query格式,参数是在url后通过“&”拼接get请求,参数放在config中的params中//接口全写请求: url地址...
(1)axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
传参格式为 formData==>
var formData=new FormData();
formData.append('user',123456);
formData.append('pass',12345678);
axios.post("/notice",formData)
.then((res) => {return ..
vue3 中的传参方式和vue2中一样,都可以用query和params传参
不过注意的是,vue2 中是有this的,但是vue3是在setup中进行的,且要引入 useRoute 和useRouter
router 文件夹内容不变,在你用cli 创建项目时选中就行,我这里不在展示代码,放一个图看看就好了
看下RouteView 文件的代码
about页面
不管那种方式都可以正确跳转,且得到传参参数。
我上边也有用watch 方法监听路由变化,用watch 是方便做监听动态的路由传参,从而
有时候需要给后端传递的参数是FormData(表单)格式(默认是json格式)
// 在main.js中配置如下代码
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.transformRequest = [function (data) {
let ret = ''
for (const it in data) {
ret += encodeUR
3. axios.delete(url[, config])
4. axios.head(url[, config])
5. axios.post(url[, data[, config]])
6. axios.put(url[, data[, config]])
7. axios.patch(url[, data[, config]])
axios
VueAxios请求封装是一种在Vue.js开发中常用的技术,它可以提高代码的复用性和开发效率。封装后的Axios请求可以被其他组件或页面所调用,无需再次编写代码,减少了代码量,同时还能够保证程序的可读性和可维护性。
VueAxios请求封装需要先引入Axios库,并在Vue实例中创建一个VueAxios实例。接着,可以通过封装函数来进行不同的请求操作,如GET、POST等,同时可以设置请求的参数、请求头和错误提示等。封装的函数可以在需要的地方进行调用,并通过Promise进行异步处理。
除此之外,还可以在VueAxios请求封装中引入拦截器用于请求前和请求后的处理,如添加请求头、设置loading状态、统一错误处理等。拦截器的使用可以进一步提高代码的可用性和健壮性。
总之,VueAxios请求封装可以让我们在开发过程中更加方便地进行API请求,同时可以提高程序的可读性、可维护性和健壮性。