Like that. ♪ ♪ https://codepen.io/latdev/pen/ZEXzNQq <div id="app"> <div> <label v-for="(text, id) in checkboxes" v-key="id"> <span v-text="text"></span> <input v-bind:name="id" type="checkbox" v-model="values[id]"> </label> <pre v-text="values"></pre> </div> </div> const checkboxes = { "one": "Один", "two": "Два", "three": "Три", } new Vue({ data: { checkboxes, values: {}, }, el: "#app" })

I'm suggesting a functional rapper.import React from "react"; import { useParams } from "react-router-dom"; const ElementWrapper = (props) => { // Component - ключ объекта, содержит нужный компонент const { Component, ...other } = props; const params = useParams(); // инжектим параметры в пропсы как match объект return <Component {...{ ...other, match: { params } }} />; }; export default ElementWrapper; and in the Route, we give them a element/component.// {Component: Quize} - объект с компонентом, другие свойства этого объекта будут // переданы в этот компонент как пропсы <Route exact path="/quizes/:id" element={<ElementWrapper {...{Component: Quize}} />} />

const questions = [ { "name": '121', "value": this.inputValues.questionValue1 }, { "name": '122', "value": this.inputValues.questionValue2 }, { "name": '123', "value": this.inputValues.questionValue3 }, { "name": '124', "value": this.inputValues.comment }, { "name": '125', "value": this.inputValues.comment2 } ]; ... if (!questions.some(el => el.value === '')) { //отправляем запрос

Delete the effectsuseEffect(() => { sendLaptop(); },[]) Why are you sending data to the server (OBD) when the component is created?And, yes, there's a need for data validation on the baden so that, at least, you don't write empty data into the BDE.And put the click in the button.<button type="submit">Send</button>

const oldPromise = new Promise((res) => { //Сейчас этот код работает синхронно и ничего не ждет внутри. const a = 1; const b = 1; res(a + b); }); //Мы вроде получили результат, но нет! console.log(oldPromise); //Нам необходимо ждать const newPromise = oldPromise.then((answer) => { console.log(answer, 'теперь мы точно получили результат'); return answer + 100 } ); //Мы можем соеденять новые цепочки, однако это не будет иметь ничего с прошлой. oldPromise .then((answer) => answer + 1) .then((oldConsole) => console.log(oldConsole, 'обратите внимания, это другая цепочка') ); //Мы все еще работаем с oldPromise. newPromise.then(data => console.log(data, 'это наш oldPromise'))

We need a parameter. withCredentialsaxios.post('your_url', data, {withCredentials: true});

Something you've done with the promis. Why then, if you have to. I don't write on the reaction, but it's basically nothing to do with it. Try your code to adapt something to this nature:async function someAsyncFn() { const headers = { 'Content-Type': 'application/json' }; const res = await axios.post('/data-base', { '...my-search-parameters': '' }, { headers }); const result = []; for (let i = 0; i &lt; res.data[0].items.length; i++) { const v = res.data[0].items[i]; const child = await axios.post('/api', { id: v.id }, { headers }); result.push({ ...v, info: child.data }); } console.log('target: result', result); }

You probably need to start a server. json-serverThe launch teams already exist, you can see them. package.json (Management) scripts) There is. server and can be launched: npm run server♪

How do we prevent an error in F12?No. This message is driving the browser out. But you can go another way, before you send a request to check the current time with help. axiosInstance.interceptors.request♪Here's an example, we need to pre-set an extra package. npm install jwt-decode:/** * Начало отправки запроса: * проверка просрочки токена, выдача нового перед отправкой запроса */ axiosInstance.interceptors.request.use(async function (config) { return new Promise(async resolve => { // все запросы на авторизацию пропускаем без доп. обработки if (noAuthRoute(config.url)) { resolve(config); return; } try { let user = window.app.$store.state.auth.user; let payload = jwt_decode(user.access_token); let expTime = payload.exp * 1000; let curTime = new Date().getTime(); // Если осталось 3 секунды и менее, обновляем токен if (expTime - curTime &lt;= 3000) { // console.log("await refreshToken ...."); await window.app.$store.dispatch("auth/refreshToken"); } /** * Авто-добавление заголовков авторизации */ config.headers = {...config.headers, ...window.app.$store.getters["auth/authHeader"]}; resolve(config); } catch (err) { console.log("axiosInstance.interceptors.request.use", err); resolve(config); } }); }, function (error) { // Do something with request error return Promise.reject(error); });

const fs = require('fs'); const stream = require('stream/promises'); const { default: axios } = require('axios'); (async () => { const { data } = await axios.get( 'https://api.telegram.org/file/bot/photos/filename.jpg', { responseType: 'stream' }, ); const writeStream = fs.createWriteStream( path.join(__dirname, './filename.jpg') ); await stream.pipeline(data, writeStream).catch(console.error); })(); Other ways to wait for the end of the tape I wrote https://ru.stackoverflow.com/a/1292723/2659 ♪The name of the file can be retrieved https://nodejs.org/dist/latest/docs/api/path.html#path_path_basename_path_ext ♪

This does not require intervals:const axios = require('axios').default, data = { data_id: 2, var_id: 3 }, apiUrl = 'https://domain.tld/api/v1/getAllItems'; const sendPostRequest = async () => { try { const resp = await axios.post(apiUrl, data); newFunc(resp.data); } catch (err) { console.error(err); } }; sendPostRequest(); In any case, in my view, the API should not handle requests for so long.

The whole problem was that I didn't correctly point the path to the cuisine. I just said, "and it's all earned."

Your "external service" returns 403 to those he thinks "blot." So give him the title "User-Agent" that'll set him up.For example, this can be done:const instance = axios.create({ baseURL: api.SERVER_URI, headers: { 'User-Agent': 'Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion', }, });

One way to download the picture like blob the object and URL.createObjectURL, further transfer to the url facility img.src♪Axiosaxios.get(url, { responseType: 'blob' }) .then((response) => { imgElement.src = URL.createObjectURL(response.data); }); Fetchfetch(url) .then((response) => response.blob()) .then((response) => { imgElement.src = URL.createObjectURL(response); });

It works CSRF protection Laravel, all POST requests should contain CSRF-token, which you need to point in the heading of the request(s Header)headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } Pre-Blade Box in Section <head> insert the following code:<meta name="csrf-token" content="{{ csrf_token() }}"> For further details, please read in official documents to Laravel. https://laravel.su/docs/8.x/csrf ) Personally, when I write a frontland under Laravel, app.js mention the following code: let token = document.head.querySelector('meta[name="csrf-token"]'); window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;Each axios. Post request will be sent with this token and there is no need to indicate it at each POST request.

Since you're making a mistake through the catch, there may be no response. data♪ It's a typescript.First, you have different variables. You're putting the results in. result♪ And you read from ♪ response♪Second, try reading like that.response?.data Full exampleimport axios from 'axios'; async function getSite(): Promise<any> { const result = await axios({ url: 'https://example.com', method: "GET" }).catch((e) => { console.log(e) }) console.log(result?.data) }

It's right to take this logic into a separate module. He knows where to make a request and how to transform it if necessary, etc. He's making an interface that can get an object in our business logic. Userapi.js:exports.getUserInfo = async (userId) => { res = await $api.get(`/user/${userId}`); return res.data; } service.js:exports.getInfo = async (userId) => { ... const user = await api.getUserInfo(userId); ... return data; }

const { default: axios } = require('axios'); const { parseStringPromise } = require('xml2js'); getLinks('https://leroymerlin.ru/sitemap-10.xml') .then(console.log) .catch(console.error); async function getLinks(url) { const { data: sitemapData } = await axios.get(url); const parsedSitemapData = await parseStringPromise(sitemapData); const items = parsedSitemapData?.urlset?.url; if (items) { return (Array.isArray(items) ? items : [items]).map( (x) => x.loc || [] ).flat(); } } Launch result:$ node src/xml-parse-1/index.js [ 'https://leroymerlin.ru/product/kartina-na-holste-russkaya-kollekciya-feericheskiy-moment-hv-h81-93859335/', 'https://leroymerlin.ru/product/kartina-na-holste-russkaya-kollekciya-zhelannoe-hv-h76-93859334/', 'https://leroymerlin.ru/product/pled-doco-dante-10184-154-93859290/', 'https://leroymerlin.ru/product/polotence-bannoe-stenova-home-surf-16515-93859296/', ... ] Loading file axios Can be replaced by your challenge readFileSync♪

Try it through. params:{}axios.get(`http://tmgwebtest.azurewebsites.net/api/textstrings/1`, { params:{ headers: { "TGM-Api-Key": "0J/RgNC40LLQtdGC0LjQutC4IQ==", }, }, })

I just had to put my head in and get my masculine back from the title only) actions: { getAllTasks({ commit }) { return axios('https://jsonplaceholder.typicode.com/todos', { method: 'GET', }) .then((alltask) => { commit('setTasks', alltask.data.map(task => task.title); }) .catch((error) => { console.error(error); }); }, },