fetch-api | 易学教程

Upload file with Fetch API in Javascript and show progress [duplicate]

阅读更多关于 Upload file with Fetch API in Javascript and show progress [duplicate]

问题 This question already has an answer here: Upload progress indicators for fetch? 8 answers I'm using Fetch API in Javascript to upload big file to server. Is there any event in Fetch API that I could use to track progress of upload? 回答1: This is NOT possible. The reason is the way the Fetch API works. The fetch method returns a Promise; the Promise API uses a then method to which you can attach “success” and “failure” callbacks. Therefore, you can gain access to progress. Still, don't lose

fetch patch request is not allowed

阅读更多关于 fetch patch request is not allowed

问题 I have two apps one is a react front end and the second one is the rails-api app. I have been happily using isomorphic-fetch till I needed to send PATCH method to the server. I am getting: Fetch API cannot load http://localhost:3000/api/v1/tasks. Method patch is not allowed by Access-Control-Allow-Methods in preflight response. but the OPTIONS response from the server includes a PATCH method in a list of Access-Control-Allow-Methods: This is how the fetch is implemented: const API_URL = 'http

Fetch: set variable with fetch response and return from function [duplicate]

阅读更多关于 Fetch: set variable with fetch response and return from function [duplicate]

问题 This question already has an answer here: How do I return the response from an asynchronous call? 36 answers I'm quite new with JavaScript and react. I have a callback from a component that gets a customer_name from a server given a id. The fetch works and the console.log prints the fullname correctly, but the customer_name in the last .then is not set, and the functions returns an empty string. Why is that? // Gets the fullname of the customer from an id. tj_customer_name(id) { let customer

How do I use window.fetch() with httpOnly cookies or basic auth

阅读更多关于 How do I use window.fetch() with httpOnly cookies or basic auth

问题 I'm playing around with window.fetch() in Firefox and Chrome. For some reasons, fetch() doesn't send any cookies. Now that wouldn't be a problem, as I can send them using fetch('/something', { headers: { Cookie: document.cookie } }) But this won't work for httpOnly cookies. 回答1: Okay, I found out after reading on the Mozilla Developer Network a bit more and trying out the credentials option. Looks like the credentials option is what I should have looked for. fetch('/something', { credentials:

redux fetch body is not use with no cors mode

阅读更多关于 redux fetch body is not use with no cors mode

I have this action which calls a function: dispatch(Api({url: "my_url", method: "POST", data: data})) Here I am passing array as a data.. import fetch from 'isomorphic-fetch' export default function Api({url, method, headers, data}={}){ return dispatch => { console.log(data) console.log(url) console.log(method) console.log(JSON.stringify(data)) let response = fetch(url, { mode: 'no-cors', method: method || null, body: data || null, }).then(function(response) { console.log("response"); console.log(response) }); } } Here I am using fetch with mode:'no-cors' I guess I am passing all the

Make server validation using redux-form and Fetch API

阅读更多关于 Make server validation using redux-form and Fetch API

问题 How to make server-side validation using redux-form and Fetch API? There are "Submit Validation" demo provided in the docs which says that recommended way to do server side validation is to return a promise from the onSubmit function. But where should I place that promise? As I understood onSubmit function should be my action. <form onSubmit={this.props.addWidget}>... Where this.props.addWidget is actually my action, provided below. import fetch from 'isomorphic-fetch'; ... function

fetch() does not send headers?

阅读更多关于 fetch() does not send headers?

I am sending POST request like this from browser: fetch(serverEndpoint, { method: 'POST', mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first redirect: 'follow', headers: new Headers({ 'Content-Type': 'text/plain', 'X-My-Custom-Header': 'value-v', 'Authorization': 'Bearer ' + token, }), body: companyName }) By the time the request reaches my back-end it does not contain X-My-Custom-Header nor Authorization header. My back-end is Google Cloud function for Firebase (basically just Node.js endpoint) that looks like this: exports.createCompany = functions

Fetch: reject promise and catch the error if status is not OK?

阅读更多关于 Fetch: reject promise and catch the error if status is not OK?

问题 Here's what I have going: import 'whatwg-fetch'; function fetchVehicle(id) { return dispatch => { return dispatch({ type: 'FETCH_VEHICLE', payload: fetch(`http://swapi.co/api/vehicles/${id}/`) .then(status) .then(res => res.json()) .catch(error => { throw(error); }) }); }; } function status(res) { if (!res.ok) { return Promise.reject() } return res; } EDIT: The promise doesn't get rejected, that's what I'm trying to figure out. I'm using this fetch polyfill in Redux with redux-promise

fetch retry request (on failure)

阅读更多关于 fetch retry request (on failure)

I'm using browser's native fetch API for network requests. Also I am using the whatwg-fetch polyfill for unsupported browsers. However I need to retry in case the request fails. Now there is this npm package whatwg-fetch-retry I found, but they haven't explained how to use it in their docs. Can somebody help me with this or suggest me an alternative? From the official fetch docs : fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('succeeded', data) }).catch(function(error) { console.log('request failed', error) }) See that catch? Will trigger when fetch

How to return return from a promise callback with fetch? [duplicate]

阅读更多关于 How to return return from a promise callback with fetch? [duplicate]

This question already has an answer here: How do I return the response from an asynchronous call? 35 answers I'm a bit stumped. I've forgotten how to do this. I have a function called ext.get() that takes a parameter of url. It fetches a response from the url. The ext.get() function is meant to return the response as a json. I don't think it is doing that. ext.get = (url) => { let myHeaders = new Headers(); let options = { method: 'GET', headers: myHeaders, mode: 'cors' }; //fetch get fetch(url, options).then(response => { console.log(JSON.stringify(response.json())) return JSON.stringify