首頁猿問 Javascript 在地圖內獲取

Javascript 在地圖內獲取

JavaScript

九州編程 2023-06-29 22:31:30

我有一個網站/作品集，我使用 Github API 顯示我的所有項目。我的目標是為這些項目創建一個過濾器，因此我在一些存儲庫的根目錄中創建了一個名為“built-with.json”的文件，該文件僅存在于兩個存儲庫中，僅用于測試目的，這是我的一系列技術在項目中使用（例如：[“React”，“Javascript”，...]）。所以我需要獲取 Github APi（該部分運行良好），然后獲取該文件，并返回一個新的項目數組，但帶有“filters”鍵，其中值是“built-with.json”內的數組。例子：Github API返回（僅一個項目返回的示例）：[{"id": 307774617,"node_id": "MDEwOlJlcG9zaXRvcnkzMDc3NzQ2MTc=","name": "vanilla-javascript-utility-functions","full_name": "RodrigoWebDev/vanilla-javascript-utility-functions","private": false}]我需要的新對象數組：[{"id": 307774617,"node_id": "MDEwOlJlcG9zaXRvcnkzMDc3NzQ2MTc=","name": "vanilla-javascript-utility-functions","full_name": "RodrigoWebDev/vanilla-javascript-utility-functions","private": false,"filters": ["HTML5", "CSS3", "JS", "React"]}]這就是我所做的：const url = "https://api.github.com/users/RodrigoWebDev/repos?per_page=100&sort=created";fetch(url) .then((response) => response.json()) .then((data) => { return data.map(item => { //item.full_name returns the repositorie name fetch(`https://raw.githubusercontent.com/${item.full_name}/master/built-with.json`) .then(data => { item["filters"] = data return item }) }) }) .then(data => console.log(data))但這不起作用！我在控制臺中得到這個：有人可以幫助我嗎？提前致謝

查看完整描述

3 回答

一只萌萌小番薯

TA貢獻1795條經驗獲得超7個贊

這里有幾件事。您不需要將 .then() 鏈接到 fetch() 上。fetch() 返回一個承諾。Array.prototype.map() 返回一個數組?？偠灾阕罱K會得到一系列的承諾。您可以使用 Promise.all(arrayOfPs) 解析 Promise 數組

編輯：在您發表評論并審查您的問題后，我重寫了此內容，以便它從過濾后的存儲庫列表中檢索技能。

const url = `https://api.github.com/users/RodrigoWebDev/repos?per_page=100&sort=created`;

(async() => {

// Final results

let results;

try {

// Get all repositories

const repos = await fetch(url).then((res) => res.json());

const responses = await Promise.all(

// Request file named 'build-with.json' from each repository

repos.map((item) => {

return fetch(

`https://raw.githubusercontent.com/${item.full_name}/master/built-with.json`

);

})

);

// Filter out all non-200 http response codes (essentially 404 errors)

const filteredResponses = responses.filter((res) => res.status === 200);

results = Promise.all(

// Get the project name from the URL and skills from the file

filteredResponses.map(async(fr) => {

const project = fr.url.match(/(RodrigoWebDev)\/(\S+)(?=\/master)/)[2];

const skills = await fr.json();

return {

project: project,

skills: skills

};

})

);

} catch (err) {

console.log("Error: ", err);

}

results.then((s) => console.log(s));

})();

反對回復 2023-06-29

largeQ

TA貢獻2039條經驗獲得超8個贊

問題是提取沒有被返回，因此 .map() 返回未定義。我可以建議使用 async-await 的解決方案嗎？

const url = "https://api.github.com/users/RodrigoWebDev/repos?per_page=100&sort=created";

getData(url).then(data => console.log(data));

async function getData(url){

const response = await fetch(url);

const data = await response.json();

const arrOfPromises = data.map(item => fetch(`https://raw.githubusercontent.com/${item.full_name}/master/built-with.json`)

);

return Promise.all(arrOfPromises);

}

反對回復 2023-06-29

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

您有多個問題：

在地圖函數內部，您不返回任何結果
地圖函數的結果實際上是另一個 Promise（因為內部有 fetch）。

那么你需要做什么：

從地圖返回承諾 - 因此你將擁有一系列承諾
使用 Promise.all 等待第 1 點中的所有承諾

像這樣的東西：

var url1 = "https://api.github.com/users/RodrigoWebDev/repos?per_page=100&sort=created";

var datum = fetch(url1)

.then((response) => response.json())

.then((data) => {

return Promise.all(data.map(item => {

//item.full_name returns the repositorie name

return fetch(`https://raw.githubusercontent.com/${item.full_name}/master/built-with.json`)

.then(data => {

item["filters"] = data

return item

})

}));

}).then(data => console.log(data))

反對回復 2023-06-29

3 回答
0 關注
183 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript 在地圖內獲取

Javascript 在地圖內獲取

3 回答

添加回答