npm包unsplash-svc使用教程

简介

npm是目前常用的包管理工具之一。当需要在前端项目中调用外部资源时，可以使用npm包来管理这些外部资源。本篇文章将介绍如何使用npm包unsplash-svc来调用unsplash提供的高质量图片。

unsplash-svc

unsplash-svc是一个轻便的npm包，用于调用unsplash提供的api获取高质量的图片。使用unsplash-svc前需要生成access key，可以在unsplash提供的开发者页面上生成。

步骤

1. 安装unsplash-svc包

在终端中输入以下命令安装unsplash-svc：

npm install unsplash-svc

2. 在js文件中引入unsplash-svc

在需要使用unsplash-svc的js文件中引入unsplash-svc：

const { UnsplashSvc } = require('unsplash-svc');
const unsplashSvc = new UnsplashSvc('your-access-key');

需要将'your-access-key'替换成自己生成的access key。

3. 使用unsplash-svc获取图片数据

使用unsplash-svc可以根据关键词、类别等条件获取图片数据。

以下是根据keyword获取图片数据的示例代码：

async function fetchUnsplashData() {
  const res = await unsplashSvc.getPhotoByKeyword('dog', 30, 1);
  return res;
}

函数getPhotoByKeyword的第一个参数为关键词，如'dog'；第二个参数为每页返回的数据数目，如30；第三个参数为页数，如1。

4. 处理返回的数据

unsplash-svc返回的数据为json格式，需要进行相关的处理后才能在前端中展示图片。

以下是获取数据并将json数据转为数组的示例代码：

fetchUnsplashData()
  .then((res) => res.json())
  .then((data) => {
    const dataArray = data.results;
    // handle the dataArray accordingly
    console.log(dataArray);
  });

运行示例代码，会在终端中输出处理后的数组数据。

总结

在前端开发中，使用npm包可以方便地调用外部资源。使用unsplash-svc可以轻松地获取unsplash提供的高质量图片，方便地嵌入到网站中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/151995