首页 前端知识 vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求

vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求

2024-05-28 09:05:30 前端知识 前端哥 542 889 我要收藏

vue3 async和await联合调用接口 🔥一文搞定

  • 🔥点击进入vue专栏🔥
  • async/await定义
  • async/await用法🔥
    • async/await的基本用法
    • async/await的使用场景
  • async/await实战🔥🔥
    • 处理一个异步请求
    • 处理多个异步请求
  • summary

🔥点击进入vue专栏🔥

上期推文中讲述了vue3项目实战中接口调用的相关知识点,介绍了调用接口的过程和简要方法🔥点击复习vue3项目实战中接口的调用🔥
从本期文章开始将会不定时更新 vue3项目实战中接口调用的三大方法。👏👏👏本期文章将重点介绍vue3的 asyncawait实现异步请求接口
(👏👏👏欢迎大佬们多多指教!)

async/await定义

在进行实际开发时会遇到异步请求的问题,这时候我们异步请求的存在就非常具有合理性了。

async异步的意思,而 await等待的意思,await 用于等待一个异步任务执行完成的结果

🔥1.async/await 是一种编写异步代码的新方法(以前是采用回调promise)。
2. async/await 是建立在 promise 的基础上。
3. async/awaitpromise 一样,也是非阻塞的。
🔥4. async/await 让异步代码看起来、表现起来更像同步代码。

async/await用法🔥

async/await的基本用法

  • async/await是ES7引入的新语法,可以更加方便的进行异步操作
  • async关键词用于函数上(async函数的返回值是Promise实例对象)
  • await关键子用于async函数当中(await可以得到异步的结果)

👇👇 基本格式 如下:

async function queryData(id) {
	const ret = await axios.get('/data');
	return ret;
}
queryData.then(ret=>{
	console.log(ret)
})

示例1(详细版含注解)
在这里插入图片描述
源码:

const initGetList  = async () => { // 函解构用async和await包裹
    const {data:res} = await getList(data) // 获取接口调用函数getList中的值data 其中data是表单里的数据
    // 对data进行解构赋值 取出请求的结果res
    console.log(res) // 控制台打印结果 => 请求成功 code为200
    data.list = res.data // 将请求结果的data值赋给data.list 方便表格table与之数据双向绑定
}
initGetList() //调用函数

这是一个请求后端接口,并将数据返回到后台管理的table表格上的例子。

template部分代码:(UI组件库使用的是Ant Design Vue
在这里插入图片描述

<a-table :data-source="data.list" :columns="columns" style="width:100%"></a-table>

示例2:

// 配置请求的基准URL地址
axios.defaults.baseURL = 'http:localhost:3000';
    //axios请求接口
    axios.get('adata').then(function(ret){
      console.log(ret.data)
    })
    //async请求接口  await后面是Promise实例对象
    async function queryData() {
      var ret = await axios.get('adata');
      // console.log(ret.data)
      return ret.data;
    }
    queryData().then(function (data) {  // 赋值过程
      console.log(data) 
    })
//服务器端的接口
app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})

async/await的使用场景

实际开发中,肯定会遇到关于发送请求获取数据的问题。例如:如果你遇到了 等第一个请求返回数据完,再执行第二个请求(可能第二个请求要传的参数就是第一个请求接口返回的数据)同步请求】这个问题,该怎么去处理呢?由于我们在不使用异步请求的情况下,默认发送多个请求是同步执行的,就会导致我们也不知道到底是哪个接口优先被执行!!!所以,我们必须要学会使用async/await实现异步请求!!!

async/await实战🔥🔥

处理一个异步请求

验证登录:

在这里插入图片描述
源码:

// 验证登录
// async 和 await 包裹需要请求的对象的值 相当于对axios的一个二次封装
const handleFinish = async (value: any) => {  // 表单输入完毕后点登录调用handleFinish函数
    // async包裹handleFinish函数的参数value 传参
    console.log(value)
    const {data:res} = await userLoginApi(value) // 对data解构赋值 取出请求结果res data是请求接口中存放表单数据的变量
    // 先从请求接口的函数userLoginApi中获取存入的表单数据value 然后用await包裹 赋值给请求结果res
    console.log(res)
    if(res.code === 20001){ // 这里的20001来自浏览器中 要看清楚是成功的值还是失败的值
        console.log('login successfully')
        message.success('login succesfully') // 数据验证通过弹出跳转成功提示框
        // 用对话存储的方法set(送进去)一个token
        window.sessionStorage.setItem('token',res.data.tokenValue) // token的位置从浏览器控制台中可以得到
        router.push("/home") // 数据验证成功后跳转页面
    } else {
        message.error('请求失败 请重新输入') // 数据验证不成功则弹出错误提示框
        console.log('error')
    }
};

表格数据:(更多见示例一)
在这里插入图片描述

处理多个异步请求

  • 第一个异步请求的结果
  • 可以作为第二个异步请求内部的参数,进行判断等数据操作。
  • 形成链式关系

在这里插入图片描述

示例1:

// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000';
	//async请求接口
    async function queryData() {
      var info = await axios.get('async1');
      //axios传递给服务器/async2接口的info.data参数,用于接口内部判断
      //传参格式:[ '地址?属性名=属性值' ]or [ ' 地址?对象= ' + '对象.属性名']
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }
    queryData().then(function(data){
      console.log(data)
    })
    
//服务器端的接口 
app.get('/async1', (req, res) => {
  res.send('hello')
})
app.get('/async2', (req, res) => {
  if (req.query.info == 'hello') {
    res.send('async1的结果确实是hello')
  } else {
    res.send('error')
  }
})

在这里插入图片描述
示例2:

const datas = async ()=> {
  await request.selectPies(Route.path.split('/')[3]).then(res=>{
  	states.ids = res.obj
	console.log(res)
  })
  //查询发帖子用户信息
  await request.selectUsers(states.ids).then(res=>{
    console.log(res.obj)
  })
}
datas()

这里是在vue3 setup语法糖中使用异步请求,从代码看出,第二个接口要使用第一个接口返回的数据,因此使用了异步请求。

summary

在前后端分离的开发模式下,需要访问后端接口,我们必须要懂得什么是异步请求——给接口的访问加上了顺序,防止它们无厘头的不受顺序限制发送请求!

以上就是vue3项目实战中接口调用方法——async/await用法的详细内容。后期会对剩余两种接口调用方法 fetch axios不定期更新!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9769.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!