时间戳

首页 > 解决方案 > 如何使用 fetch 而不是 request？

javascript - 如何使用 fetch 而不是 request？

问题描述

我正在制作显示我们学校信息的 react-native 应用程序。我在谷歌电子表格中写了信息，并让我的应用程序按请求和要求抓取它。

var date = new Date()
var year = date.getFullYear()
var month = new String(date.getMonth() + 1)
var day = new String(date.getDate())

if (month.length == 1) {
  month = "0" + month
}

if (day.length == 1) {
  day = "0" + day
}

const today = (year + month + day)

// arrays to save each information
var breakfast = [];
var lunch = [];
var dinner = [];
var quote = [];


var request = require('request');
//get information from google spreadsheet
request('https://script.google.com/macros/s/AKfycbzwGjC5GU3RK448VeJtGm6xXpf_UzFgps3zi5bv9gfQcfsOervJ6RYinWFi-UzGbNMg/exec?sheetName=%EC%8B%9C%ED%8A%B81', function (err, res, body) {
// get information in body tag by json form
  var dataArray = JSON.parse(body)
  for (let i = 0; i < dataArray.data.length; i++) {
// find today's information
    if (String(dataArray.data[i].gdate) == today) {
      breakfast = dataArray.data[i].gbreakfast.split(',')    
      console.log(breakfast)  
      lunch = dataArray.data[i].glunch.split(',')
      dinner = dataArray.data[i].gdinner.split(',')
      quote = "\"" + dataArray.data[i].gquote + "\""
      break
    }
  }
});

在 expo web(snack) 中运行时，它可以正常工作。但是当我尝试构建应用程序时，

Unable to resolve module crypto from C:\Users\munge\SEMA\node_modules\request\lib\helpers.js: crypto could not be found within the project or in these directories:
  node_modules\request\node_modules
  node_modules
  ..\node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
  2 |
  3 | var jsonSafeStringify = require('json-stringify-safe')
> 4 | var crypto = require('crypto')
    |                       ^
  5 | var Buffer = require('safe-buffer').Buffer
  6 |
  7 | var defer = typeof setImmediate === 'undefined'

发生上述错误。我猜它是因为请求而发生的，所以我想使用 fetch 而不是请求来更改我的代码。我能怎么做？

标签： javascriptnode.jsreactjsreact-nativefetch

解决方案

Fetch api 非常易于使用，一些查看文档会让您准备好使用。

至于您的实际代码，我做了一些更新，以便您可以测试 fetch api，这里是：

const list = async () => {
    var date = new Date()
    var year = date.getFullYear()
    var month = new String(date.getMonth() + 1)
    var day = new String(date.getDate())

    if (month.length === 1) {
      month = "0" + month
    }

    if (day.length === 1) {
      day = "0" + day
    }

    const today = (year + month + day)

    // arrays to save each information
    let breakfast = [];
    let lunch = [];
    let dinner = [];
    let quote = [];

    try{
      //get information from google spreadsheet
      const response  = await fetch('https://script.google.com/macros/s/AKfycbzwGjC5GU3RK448VeJtGm6xXpf_UzFgps3zi5bv9gfQcfsOervJ6RYinWFi-UzGbNMg/exec?sheetName=%EC%8B%9C%ED%8A%B81')
      if (response.ok) {
        var dataArray = await response.json()
        for (let i = 0; i < dataArray.data.length; i++) {
          // find today's information
          console.log(dataArray.data[i].gdate)
          if (String(dataArray.data[i].gdate) === today) {
            breakfast = dataArray.data[i].gbreakfast.split(',')
            console.log(breakfast)
            lunch = dataArray.data[i].glunch.split(',')
            dinner = dataArray.data[i].gdinner.split(',')
            quote = "\"" + dataArray.data[i].gquote + "\""
            break
          }
        }
      } else {
        console.log('failed to fetch info')
      }
    } catch(e) {
      console.log('failed to fetch info')
    }
  }
  
  list()

提醒一下，我在这里使用 fetch 和 async/await，你可能会看到一些使用 Promises 的实现，它基本上是相同的结果。

您的项目取得成功

推荐阅读