小菜教程之使用vue请求接口数据

icon2024年9月19日
icon145

本教程为小菜教程系列，本教程只针对小菜，emm......小菜是谁？

那是我一个还在学习前端的朋友，至于为什么叫ta小菜emmmm.....我想这个名字说明了一切！

今天要说的请求接口并且保存数据，废话不多少开始演示。

首先封装接口

一般接口有两种形式pots和get，当然也有别的请求类型，但是都一样。

先说post请求（参考下面示例代码）要注意的是我这个函数的参数是data，在下面也写了一个data，这是因为在使用axios时候post的请求的数据是使用data接收的，然后咱们封装传值的时候他是以键值对的形式传的，当键和值一样的时候(值是一个变量并且变量名和键相同)可以简写，所以咱们这里写一个data

export const autoDeployApi = (data) => { 
  return service({
    url: 'script/deploy',
    method: 'post',
    data
    //原本是这样
    // data:data
  })
}

对于get请求也是如此，当然是在有参数的情况下

// 有参数
export const autoLogApi = (params: any): Promise<any> => {
  return service({
    url: 'script/log',
    method: 'get',
    params
  })
}
// 无参数
export const autoLogApi = () => {
  return service({
    url: 'script/log',
    method: 'get',

  })
}

请求数据

封装完后把代码引入到要使用的页面。

我现在要获取的是这三个下拉菜单的数据，有一点就是咱们这个下拉菜单的数据只需在页面加载时候获取一次就行了，所以可以不用封装成一个函数去调用，直接在onMounted写就好了（下面的图片看不清楚可以把图片在新页面打开！！后续我会优化点击图片放大！！）

开始编写代码，咱们还是使用try...catch...语句，创建一个变量接收接口返回的数据，我不比较喜欢使用res，这时候咱们打印res去看看返回的数据

onMounted(async () => {
  try {
    const res = await autoOptionsApi()
    console.log(res)


  } catch (err) {
    console.log(err)
  }
})

可以看到我们的控制台打印了res，其中res包含了config，data，headers...等等值，其中接口的数据在data中，不需要去管其他的，因为这个是axios封装的并返回的，他会把接口返回的数据存在data中，打个比方就是你制定了一个规则，规定别人想从你修的路下面经过就必须把钱放在路旁的箱子里一样，你只用去箱子拿钱就可以了，这个也类似，我们只用去data里面拿后端给咱们的数据就可以了

可以看到我想获取的数据是这些，那么我就要写成 res.data.data,这时候咱们就拿到了data，如或是获取type这体数据，那么就是res.data.data.type，就是一层一层的去找就可以了！！！

咱们一般都是判断接口没问题才去保存数据，我们后端是code返回200就是数据没问题，这个可以看接口文档或者是问后端都可以，那么咱么在判断数据没问题时候去使用变量把数据保存一下，因为你在这时候使用res.data.data.type可以打印出来这个数据，但是你在别的地方打印肯定报错啊，所以保存一下，让我们啥时候都可以访问这个数据，代码如下

onMounted(async () => {
  try {
    const res = await autoOptionsApi()
    console.log(res)
    if (res.data.code === 200) {
      action.value = res.data.data.action
      status.value = res.data.data.status
      type.value = res.data.data.type
    }
  } catch (err) {
    console.log(err)
  }
})

然后你就可以使用这个数据了，在页面或者其他函数都以访问了！！！

完结

最后希望小菜努力学习，争取早日摆脱小菜这个称号！！

热门文章