在页面数据发生变化时,服务器会反复请求数据进行对比更新,常用场景为表单,列表增删改查等。
1.下载:npm i axios
遇到eslint错误提示,删除package.json中es-lint开头的的5个配置
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
2.导包:import axios from 'axios'
3.使用:
const {data:res} = await axios.请求方发('请求路径',{data参数})
await axios.请求方发('请求路径',{params:{params参数}})
4.代码示例:
<template>
<div>
<button @click="doLogin">111111</button>
</div>
</template>
<script>
//导入
import axios from 'axios'
export default {
// 页面钩子,页面一加载就请求数据
async created() {
const {data:res} = await axios.get('路径',{params:{num:10}})
console.log(res)
},
methods: {
// 异步请求 在用户点击页面进行操作后对数据的改变和处理时再重新请求服务器数据
async doLogin(){
const {data:res} = await axios.post('路径',{username:'admin',password:'123456'})
console.log(res)
}
},
}
</script>
<style>
</style>
*注:代码中'路径'为所需请求路径。