获取VueJS中与Axios的API外键关系

polkgigr 于 2022-12-04 发布在 iOS

关注(0)|答案(1)|浏览(144)

内容：

我使用API-Platform创建API，并使用Vue 3和HTTP客户端Axios使用此API
我的API中有两个实体：

作者：名称（字符串）
*文本：内容（字符串），作者（与作者的关系）

因此，文本项与作者相关...

问题：

在Vue 3中，我想调用我的API来获取文本实体。但是在作者列（<td> {{ item.author }} </td>）中，我只有URI引用（/api/authors/2），但是我需要作者的名字...

我尝试的解决方案：

<td> {{ getAuthor(item.author) }} </td>

（作者链接= /api/作者/2）

methods: {
  getAuthor: async function (authorLink){

    const res = await axios.get('http://127.0.0.1:8000' + authorLink)
    console.log(res.data.name)
    return res.data.name

  }

解决方案的结果：

使用console.log（）：“JohnDoe”-〉这个工作！
有回报：'"[对象承诺]"' -〉这不起作用。

axios

来源：https://stackoverflow.com/questions/74641504/get-api-foreign-key-relation-with-axios-in-vuejs

1条答案

按热度按时间

gcmastyq1#

这种方式可以用async/await模式获取返回名称。
而axios需要一个格式正确的Accept-Encoding。

const getAuthor = async () => {
...
   const res = await axios.get(...);
   return Promise.resolve(res.data.name);
};

getAuthor()
    .then(result => {
        console.log(result);
    })

演示代码

const axios = require("axios");

const getAuthor = async () => {
    try {
        const res = await axios.get('https://jsonplaceholder.typicode.com/users/1',
            {
                headers: {
                    'Accept-Encoding': 'application/json',
                }
            }
        );
        return Promise.resolve(res.data.name);
    } catch (error) {
        return Promise.reject(error);
    }
};

getAuthor()
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error);
    });

此代码结果

$ node get-data.js
Leanne Graham

这是Express服务器版本

const express = require("express")
const axios = require("axios")
const cors = require("cors")

const PORT = 3030

const app = express()
app.use(express.urlencoded({ extended: true }))
app.use(cors())

const getAuthor = async () => {
    try {
        const res = await axios.get('https://jsonplaceholder.typicode.com/users/1',
            {
                headers: {
                    'Accept-Encoding': 'application/json',
                }
            }
        );
        return Promise.resolve(res.data.name);
    } catch (error) {
        return Promise.reject(error);
    }
};

app.get("/users/:id", async (req, res) => {
    getAuthor()
        .then(result => {
            res.json(result)
        })
        .catch(error => {
            console.error(error);
        });
})

app.listen(PORT, (err) => {
    if (err)
        console.log("Error in server setup")
    console.log("Server listening on Port", PORT);
})

安装相关性

npm install express axios cors

运行它

$ node data-server.js
Server listening on Port 3030

打开此URL Chrome并按F12打开DevTool

http://localhost:3030/users/1

赞(0）回复(0）举报 2022-12-04

我来回答

获取VueJS中与Axios的API外键关系

1条答案

相关问题

热门标签

最新问答