Trình tạo tên duy nhất javascript

Phân tích sâu hơn về trạng thái bảo trì của @legraphista/unique-names-generator dựa trên nhịp phiên bản npm đã phát hành, hoạt động của kho lưu trữ và các điểm dữ liệu khác đã xác định rằng việc bảo trì của nó là Không hoạt động

Một tín hiệu bảo trì dự án quan trọng cần xem xét đối với @legraphista/unique-names-generator là nó không thấy bất kỳ phiên bản mới nào được phát hành cho npm trong 12 tháng qua và có thể được coi là một dự án đã ngừng hoặc ít được chú ý

Trong tháng trước, chúng tôi không tìm thấy bất kỳ hoạt động yêu cầu kéo nào hoặc thay đổi trạng thái vấn đề đã được phát hiện đối với kho lưu trữ GitHub

Không dành riêng cho nút, nhưng tôi đã tìm thấy trình tạo haiku sau tại đây. Bạn có thể điều chỉnh nó theo cách sau

function haiku(){
  var adjs = ["autumn", "hidden", "bitter", "misty", "silent", "empty", "dry",
  "dark", "summer", "icy", "delicate", "quiet", "white", "cool", "spring",
  "winter", "patient", "twilight", "dawn", "crimson", "wispy", "weathered",
  "blue", "billowing", "broken", "cold", "damp", "falling", "frosty", "green",
  "long", "late", "lingering", "bold", "little", "morning", "muddy", "old",
  "red", "rough", "still", "small", "sparkling", "throbbing", "shy",
  "wandering", "withered", "wild", "black", "young", "holy", "solitary",
  "fragrant", "aged", "snowy", "proud", "floral", "restless", "divine",
  "polished", "ancient", "purple", "lively", "nameless"]

  , nouns = ["waterfall", "river", "breeze", "moon", "rain", "wind", "sea",
  "morning", "snow", "lake", "sunset", "pine", "shadow", "leaf", "dawn",
  "glitter", "forest", "hill", "cloud", "meadow", "sun", "glade", "bird",
  "brook", "butterfly", "bush", "dew", "dust", "field", "fire", "flower",
  "firefly", "feather", "grass", "haze", "mountain", "night", "pond",
  "darkness", "snowflake", "silence", "sound", "sky", "shape", "surf",
  "thunder", "violet", "water", "wildflower", "wave", "water", "resonance",
  "sun", "wood", "dream", "cherry", "tree", "fog", "frost", "voice", "paper",
  "frog", "smoke", "star"];

  return adjs[Math.floor(Math.random()*(adjs.length-1))]+"_"+nouns[Math.floor(Math.random()*(nouns.length-1))];
}

Trong hướng dẫn này, chúng ta sẽ tạo một trình tạo tên ngẫu nhiên. Nó sẽ tạo họ và tên, đồng thời chúng tôi cũng sẽ có tùy chọn chỉ định giới tính

Tìm nạp dữ liệu

Đầu tiên, chúng ta sẽ cần một số dữ liệu để làm việc với. Hướng dẫn này sẽ sử dụng dữ liệu từ danh sách ngẫu nhiên. com, nhưng bạn có thể điều chỉnh mã này để sử dụng bất kỳ nguồn dữ liệu nào—bạn chỉ cần từng loại tên (tên, họ, v.v. ) dưới dạng một mảng các chuỗi

Đây là dữ liệu chúng tôi sẽ sử dụng (bạn có thể nhấp vào liên kết để xem JSON thô trong trình duyệt của mình)

• Tên nữ. https. //www. danh sách ngẫu nhiên. com/data/tên-nữ. json
• Tên nam. https. //www. danh sách ngẫu nhiên. com/data/tên-nam. json
• họ. https. //www. danh sách ngẫu nhiên. com/data/tên-họ. json

Sử dụng Fetch API, hãy bắt đầu bằng cách viết một hàm async để tìm nạp dữ liệu

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

Vì đây là chức năng không đồng bộ, hãy thêm một số xử lý lỗi để ghi lỗi vào bảng điều khiển trong trường hợp yêu cầu mạng không thành công

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

Đây là chức năng có mục đích chung để tìm nạp JSON, nhưng chúng tôi thực sự muốn tìm nạp từ ba điểm cuối API khác nhau (đối với tên nam, tên nữ và họ)

Hãy viết một hàm mới sử dụng hàm

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

1 của chúng ta và các điểm cuối được đề cập ở trên để thực hiện việc này

Lưu ý cách các URL giống nhau ngoài một từ?

function fetchNames(nameType) {
  return fetchData(`https://www.randomlists.com/data/names-${nameType}.json`);
}

Điều này cho phép chúng tôi cung cấp phần còn thiếu của URL dưới dạng một biến khi chúng tôi gọi hàm này, e. g.

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

2

Chọn một tên ngẫu nhiên từ danh sách

Bây giờ chúng tôi có một cách để tìm nạp từng danh sách, chúng tôi cần một cách để chọn một mục ngẫu nhiên. Chúng ta có thể làm điều này với một chức năng trợ giúp đơn giản

function pickRandom(list) {
  return list[Math.floor(Math.random() * list.length)];
}

Tạo tên ngẫu nhiên

Chúng tôi có tất cả các phần riêng lẻ của trình tạo tên của mình đã sẵn sàng hoạt động. Hãy viết hàm

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

3 cuối cùng của chúng ta. Nó sẽ nhận một tham số

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

4, mà chúng tôi sẽ sử dụng để xác định xem trả về tên nam hay nữ

async function generateName(gender) {
  try {
    // Fetch both name lists in parallel
    const response = await Promise.all([
      fetchNames(gender),
      fetchNames('surnames')
    ]);

    // Promise.all returns an array of responses
    // to our two requests, so select them
    const [firstNames, lastNames] = response;

    // Pick a random name from each list
    const firstName = pickRandom(firstNames.data);
    const lastName = pickRandom(lastNames.data);

    // Use a template literal to format the full name
    return `${firstName} ${lastName}`;
  } catch(error) {
    console.error('Unable to generate name:', error);
  }
}

Vì đây là một chức năng không đồng bộ khác, nó sẽ trả về một lời hứa. Để

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

5 kết quả, chúng ta có thể gọi nó như thế này

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

1

Làm cho giới tính tùy chọn

Nếu chúng ta quên truyền tham số

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

4 thì sao?

Hiện tại, chúng tôi gặp lỗi vì chương trình của chúng tôi sẽ cố tìm nạp dữ liệu từ một URL không tồn tại. Ôi không. Làm thế nào chúng ta nên xử lý này?

Chúng tôi có một vài lựa chọn

1. Chúng tôi có thể đưa ra lỗi nếu tham số

   async function fetchData(url) {
     try {
       const response = await fetch(url);
       if (!response.ok) {
         throw new Error('Network response was not ok');
       }
       return response.json();
     } catch (error) {
       console.error('Unable to fetch data:', error);
     }
   }

   4 không được chuyển
2. Chúng ta có thể chọn một giới tính ngẫu nhiên

Hãy triển khai tùy chọn hai—chúng ta có thể thực hiện việc này dễ dàng với hàm trợ giúp

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

8 của mình. Cuộc gọi đầu tiên đến

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

9 có thể được thay đổi thành cuộc gọi này

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

6

Bây giờ, việc chỉ định giới tính là tùy chọn và trình tạo tên của chúng tôi sẽ luôn trả về tên theo bất kỳ cách nào

Để tất cả chúng cùng nhau

Toàn bộ chương trình trông như thế này

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

7

Đây là một phiên bản làm việc bạn có thể chạy

Sử dụng dữ liệu của riêng bạn

Bạn muốn sử dụng một API khác?

Giả sử bạn muốn mã hóa mảng tên hobbit. Bạn có thể cập nhật nó để trông như thế này

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

9

Nếu chúng ta đang làm việc với dữ liệu cục bộ (thay vì lấy dữ liệu từ các điểm cuối API), thì chúng ta cũng cần đơn giản hóa hàm

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Unable to fetch data:', error);
  }
}

3 vì nó không còn thực hiện bất kỳ lệnh gọi không đồng bộ nào nữa

Làm cách nào để tạo một tên ngẫu nhiên trong JavaScript?

một trình tạo tên tốt là gì?