标签: fetch-api

根据规范,fetch api有各种缓存模式.("default","no-store","reload","no-cache","force-cache"和"only-if-cached")但是,不清楚每种模式的用途,或者浏览器支持的状态.

我有一个可能很大的文件（100+ Mb）的url，如何使用访存将其保存在本地目录中？

我环顾四周，但是关于如何执行此操作似乎没有很多资源/教程。

谢谢！

我试图将一些数据发布到服务器,但我不知道如何取回响应数据.

我有以下代码:

fetch(url, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: login,
    password: password,
  })
}).then(function(a){
  console.log(a);
})

它打印出一个Response包含body(ReadableByteStream),bodyUsed(false),ok(true),status(200)等数据的数据,但是我找不到我回来的数据,无处可去.当我打开chrome开发者控制台 - 网络时,我看到那里的响应数据.

我究竟做错了什么？

我一直在寻找一些资源如何获取,承诺,...工作,但我找不到任何写得好.

我是JavaScript新手并做出反应.我有一个组件的回调,该组件从给定id的服务器获取customer_name.提取工作正常,console.log正确打印全名,但最后一个.then中的customer_name未设置,并且函数返回一个空字符串.这是为什么？

// Gets the fullname of the customer from an id.
tj_customer_name(id) {
  let customer_name = '';

 fetch(`/customers/${id}.json`, {
   headers: API_HEADERS,
   credentials: 'same-origin'
 })
 .then((response) => {
   if(response.ok) {
     return response.json();
   } else {
     throw new Error('Server response wasn\'t OK');
   }
 })
 .then((json) => {
   customer_name = json.first_name.concat(' ').concat(json.last_name);
   console.log(customer_name);
 });
 return customer_name;
}

我正在尝试从API中获取数据.API已启用CORS支持并返回以下对OPTIONS请求的响应:

Access-Control-Request-Headers:content-type  
Access-Control-Allow-Origin:*  

API不允许'Content-type'任何其他内容'application/json'.

使用此限制,我试图使用fetchReact-Native方法来获取数据.

方法1(无人):

{
    method: 'POST',
    mode: "no-cors",
    headers: {
       'content-type': 'application/json'
}

使用此方法,浏览器会自动将内容类型发送为"text/plain".我假设这是因为CORS默认只允许三个标头中的一个.但是,由于服务器不支持此内容类型,因此会针对不支持的内容类型返回错误.

方法2(与cors或没有任何东西):

{ 
    method: 'POST',
    mode: "cors", // or without this line
    redirect: 'follow',
    headers: {
        'content-type': 'application/json'
    }
}   
...   
.then(response => console.log(response))

在这种情况下,使用Chrome的F12网络工具,我可以看到服务器返回数据:对服务器的第一个请求是fetchfor OPTIONS.为此,服务器回复一个空对象以及上面的标题集.下一个调用是实际的POST API调用,服务器使用包含一些数据的正确JSON响应向其响应.但是,通过我的代码进入控制台的响应是{}.我假设这是因为react的fetchAPI返回了OPTIONS调用的响应而不是实际的POST调用.

有没有办法忽略OPTIONS请求的响应并获得then处理后续请求响应的方法？

我正在尝试一些简单的方法,我可以使用fetch API从我的应用程序的前端发出请求

let request = new Request('http://localhost:3000/add', {
    headers: new Headers({
        'Content-Type': 'text/json' 
    }),
    method: 'GET'
});

fetch(request).then((response) => {
    console.log(response);
});

我在服务器上处理这个请求是这样的,

app.get('/add', (req, res) => {
    const data = {
        "number1": "2", 
        "number2": "4"
    };
    res.send(data);
});

但是,当我尝试在前端console.log(响应)上访问我的数据时,我得到以下对象

Response {type: "basic", url: "http://localhost:3000/add", redirected: false, status: 200, ok: true…}
body:(...)
bodyUsed:false
headers:Headers
ok:true
redirected:false
status:200
statusText:"OK"
type:"basic"
url:"http://localhost:3000/add"
__proto__:Response

响应正文是空的.我认为这是数据出现的地方？如何有效地从服务器传递数据？

我正在像这样进行 fetch 调用，fetch("foo.com/x.json")并希望获得在开发工具中报告的发出请求所需的时间。

我已经试过了，

performance.mark("fetch-start");
let start = performance.now();
let res = fetch("https://example.com/foo.json", {});
res.then(r => {
  performance.mark("fetch-end");
  performance.measure("fetch", "fetch-start", "fetch-end");
  var measures = performance.getEntriesByName("fetch");
  var measure = measures[0];
  console.log(measure);
});

也尝试过performance.now() -start，但它们不如 devtools 准确，我猜这是因为浏览器一次做不止一件事，并且没有花时间孤立地测量事物。

有没有办法获得与开发人员工具一样准确的网络计时？

抱歉，如果这是一个菜鸟问题，我正在创建一个Django 应用程序，为此我正在尝试使用 JavaScript fetch API 访问从 POST 请求接收的数据，但它显示为空。我不明白我的错误是什么。我试图删除所有不必要的部分进行调试。错误在这一部分：

我的代码 views.py

def checkdb(request):
    if request.method == "POST":
        a = request.POST.get('tag', 'default')
        print("printing", a)
        print(request.POST)
    return HttpResponse("Hello")

def check(request):
    return render(request, 'shop/new.html')

代码 URLS.py

urlpatterns = [
    path('', views.index, name="shop"),
    path('checkdb/', views.checkdb, name="checkdb"),
    path('check/', views.check, name="check"),
]

的代码new.html，它只有脚本标签来获取请求只是为了测试目的。

<script>

data = JSON.stringify({
    headline: "Testing",
    tag: "Testing",
    background_image: "Testing",
    content: "Testing",
    user: 1
})

let csrftoken = getCookie('csrftoken');
let response = fetch("/shop/checkdb/", {
    method: 'POST',
    body: data,
    headers: { …

我是 Next.js 的新手，我正在尝试理解建议的结构并处理页面或组件之间的数据。

例如，在我的页面中home.js，我获取了一个调用的内部 API /api/user.js，它从 MongoDB 返回一些用户数据。我通过使用fetch()从 inside 调用 API 路由来做到这一点getServerSideProps()，它在一些计算后将各种道具传递给页面。

根据我的理解，这对 SEO 有好处，因为道具在服务器端被获取/修改，页面让它们准备好呈现。但后来我的Next.js文档，你不应该用在阅读fetch()到所有的API路线getServerSideProps()。那么我应该怎么做才能遵守良好的实践和良好的 SEO？

我没有home.js在 API 路由本身中进行所需计算的原因是我需要来自这个 API 路由的更多通用数据，因为我也会在其他页面中使用它。

我还必须考虑缓存，哪个客户端使用 SWR 来获取内部 API 非常简单，但服务器端我还不确定如何实现它。

home.js：

export default function Page({ prop1, prop2, prop3 }) {
        // render etc.
}

export async function getServerSideProps(context) {
  const session = await getSession(context)
  let data = null
  var aArray = [], bArray = [], cArray = []
  const { …

现在我使用 Flutter 在应用程序中工作，我有 4 种不同的语言，我使用 json （arb 文件）进行本地化（翻译）

我需要传递不同的字符串值，应用程序使用 API 获取它们，如下面的示例所示

AppLocalizations.of(context)!snapshot.data![index].state_pickup[0]

但是，"AppLocalizations.of(context)!"它不会从中获取返回数据， snapshot.data![index].state_pickup[0]而是将其作为字符串查找，并尝试在 AppLocalization.dart 类中搜索匹配的字符串名称？

知道如何将动态字符串参数传递给吗AppLocalizations.of(context)!？