



axios get请求




axios get请求
---axios---
npm install axios 安装
import axios from ‘axios’ 引入
请求的五种方式
Get:请求数据
Post:提交数据(表单提交)
Put:更新数据(所有数据推送给后端)
Patch:更新数据(将更改的数据推送给后端)
Delete:删除数据

get 两种写法:
axios.get('/data.json',{
params:{
id:12
}
}).then((res)=>{
console.log(res)
})

axios({
methord: 'get',
url: '/data.json',
params:{
id:12
}
}).then(res=>{
console.log(res)
})

axios请求
get 获取数据,post 提交数据(表单+工作文件上传)
put 更新数据(所有数据推送到后端)
patch 更新数据 (只将修改的数据推送到后端)
delete 删除数据
具体用那种方法 是由后端定义
axios请求方法:get、post、put、patch、delete
get:获取数据
post:提交数据(表单提交+文件上传)
put:更新数据(所有数据推送到后端)
patch:更新数据(只将修改的数据推送到后端)
delete:删除数据

请求携带参数:
//最终请求的路径为:HTTP://localhost:8080/data.json?id=12
axios.get('./data.json',{
params:{
id:12
}
}).then(res=>{
console.log(res)
})
axios({
url:'./data.json',
params:{
id:12
}
}).then(res=>{
console.log(res)
})
axios 请求方法:get post put patch delete
get:获取数据
post:提交数据(表单提交+文件上传)
put:更新数据(所有数据推送到后端)
patch:更新数据(只将修改的数据推送)
detele:删除数据
路由配置:component:()=>import('./views/2-2.vue').当访问到2-2.vue页面时候才引入组件

键值对,两种写法
键值对,访问地址


axios请求方法及别名
类别:get、post、put、patch、delete
get请求:第一种相当于别名方式,第二种通过配置方式。

get请求带参数方式


路由引入组件两种方式区别:
第一种无论是否通过路由去访问该组件都会加载该组件。
第二种只有当通过路由去访问该组件时才回去加载该组件(可以理解为懒加载或者异步加载)。

如下图,它是vue的socket通信,表示热更新,也就是代码编辑完成之后,页面会自动更新

Status Code:304,表示重定向,正常访问一个接口时,返回的是200,如果第二次访问接口时,数据没有变化,那么浏览器就会自动识别返回状态304,相当于没有更改,这样加载会更快。

懒加载方法:
{
path:'/2-2',
name:'axios'请求方法,
component:()=>import('./views/2-2.vue')
}
get方法1:
crented(){
axios.get('/data.json',{
params:{id:12}
}).then((res) =>{
console.log(res)
})
}方法二:
axios({
method:'get',url:'/data.json'}).then(res=>{ console.log(res)})
axios 请求方法:get post put patch delete
get:获取数据
post:提交数据(表单提交+文件上传)
put:更新数据(所有数据推送到后端)
patch:更新数据(只将修改的数据推送)
detele:删除数据
get post patch put delete
axiox请求方法:get、post、put、patch、delete;
get:获取数据
post:提交数据(表单提交+文件上传)
put:更新数据(将所有数据推送给后台)
patch:更新数据(只推送修改的数据到后台)
delete:删除数据
axiox请求方法:get、post、put、patch、delete;
get:获取数据
post:提交数据(表单提交+文件上传)
put:更新数据(将所有数据推送给后台)
patch:更新数据(只推送修改的数据到后台)
delete:删除数据
具体的请求方式由后台来定义;
在router.js中使用import...from...(
如:import Home from "../views/Home.vue";
)的方式引入组件时,不管页面有没有访问该组件,页面在第一次加载的时候都会被引用;
而使用component的方式引入组件时,则只有在页面访问该组件的时候才会去加载该组件(如:
component: () =>
import("../views/About.vue"))
axios请求方法:
get:获取数据
post:提交数据(表单提交+文件上传)
put:更新数据(所有数据推送到后端)
patch:更新数据 (只将修改的数据推送到后端)
delete:删除数据
axios的5种方法
axios请求方法 : post get put patch delete
1.axios 请求方法:
get:获取数据
post:提交数据
put:更新数据(所有数据推送到后端)
patch:更新数据(只将修改的数据推送到后端)
delete:删除数据
2.axios其它格式
axios({
method:'get',
url:'/data.json',
params:{id:2}
})
3.get传参方法(params):
axios.get('/data.json',{params:{id:12}}).then(($res)=>{console.log(res)})
axios方法
axios请求方法区别
注意真实项目中router.js里面路由的写法:
{
path: '/',
name: 'HelloWorld',
component: HelloWorld//第一种方式
},
{
path: '/axios',
name: 'axios',
// component: Axios
component:()=>import('../components/Axios')//第二种方式,按需引入真实项目使用
}
axios请求方法:get,post,put,patch,delete
get:获取数据
post:提交数据 (表单提交+文件上传)
put:更新数据(所有数据推送到服务端(后端))
patch:更新数据(只将修改的数据推送到后端)
delete:删除数据
2-2 8:30
router.js 引用路由