async await的异步请求

在页面数据发生变化时,服务器会反复请求数据进行对比更新,常用场景为表单,列表增删改查等。

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>

*注:代码中'路径'为所需请求路径。

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值