axios 能否直接return

Question

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

// 封装字典
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} 调用方法可以直接拿到返回值

Answer 1

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

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

Answer 2

你是不是想要这个样子？

//封装请求
     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操作后直接返回异步请求后的数据。

Answer 3

//封装

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处理后才能正常返回数据

Answer 4

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

Answer 5

同上所说的

直接封

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

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

Answer 6

这样写就可以了

// 封装字典
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)
}