H5W3
当前位置:H5W3 > 其他技术问题 > 正文

axios 能否直接return

场景: 接口返回的数据是下拉框需要的数据

// 封装字典
export async function dictionaries(para) {
  let rData = []
  await axios.get(`/api/admin/dict/type/${para}`)
    .then(res => {
      rData = res.data.data
    })
    .catch(err => {
      rData = []
    })
  return rData
}

// 调用
dictionaries('card_type').then(v => {
        console.log(v)
})

这样封装好返回的参数我只能通过.then 去拿到parmise的返回值
这样写很麻烦 我要创建许多变量在.then里接收并赋值
有什么好办法能直接拿到 类似于 dictionaries () {return data} 调用方法可以直接拿到返回值

回答:

看了其他问题之后,我理解是有多个字典列表需要显示出来,所以需要请求多次dictionaries

我提供下我的思路:”把字典列表“封装为组件,组件内部请求数据并渲染列表,因为组件是可以复用的,就不需要考虑多次调用和变量问题。

回答:

你在外面也直接 async-await 调用 dictionaries 这个方法不就好了。

回答:

同上所说的

直接封

export async function dictionaries(para) {
  return await axios.get(`/api/admin/dict/type/${para}`)
}

// 使用时
const data = await dictionaries('xxx')

整个axios运行是基于promise链式使用的。
意味着你可以在promise链中处理 请求异常与请求结果。

axios.interceptors.request
axios.interceptors.response

基于业务需求在对应的注入点加上前置处理与后置处理。

回答:

你是不是想要这个样子?

//封装请求
     dictionaries(para) {
        return axios.get(`/api/admin/dict/type/${para}`, parmas).then(res=>res.data).catch(err => console.log(err))
      },
      
 //调用请求
      async test() {
        const data1 = await this.dictionaries('type')
        const data2 = await this.dictionaries('test')
        console.log(data1)
      }

data1,data2 就是处理过后then里面的值。
axios是基于promise封装的,所以他需要.then来接收数据,而async /await 是生成器的语法糖,await后面跟的是一个promise,对promise操作后直接返回异步请求后的数据。

回答:

这样写就可以了

// 封装字典
export async function dictionaries(para) {

  const  rData = await axios.get(`/api/admin/dict/type/${para}`)
   return rData.data;
}

// 调用的地方也要用 async  await 

export async function getData() {

  let re= await dictionaries('card_type')
  console.log(re)
}

回答:

//封装

class Request{

async getData() {
       return await axios.get('http://xxxx').then(res=>res.data).catch(err=>{err});
    }
}
export default new Request()

//调用

import Request from "xxx/xxx"

request.getData().then(res=>{
   console.log(res)
})

因为直接打印出来的话是返回一个Promise,所以需要then处理后才能正常返回数据

本文地址:H5W3 » axios 能否直接return

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址