Проблема с подключением axios?

Question

[BludFIRE]

Скачал пакет axios через yarn add axios --dev и импортировал его в самом js, написал запрос и он не работает.

import axios from "axios";

const options = {
  method: 'GET',
  url: 'http://127.0.0.1:8000/api/***********',
  params: {page: '1'},
  headers: {
    accept: 'application/json',
    Authorization: 'Token ********************',
    'X-CSRFToken': '******************************************************'
  }
};

axios.request(options).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});

Comments

[Aetae]

У меня есть подозрение, что ты нифига не собираешь, а пуляешь файл как есть с import.

Answer 1

[Евгений Щербаков]

А зачем вы использовали ключ --dev при установке axios?

Интересно какой у Вас конфиг проекта, потому что ошибка явно говорит о том, что Вы используете import не в модуле.

Comments

[BludFIRE]

настраивал все при помощи галпа

"use strict"

let project_folder="dist";
let source_code="src";

let path={
	build:{
		html: project_folder + "/",
		css: project_folder + "/css/",
		js: project_folder + "/js/",
		img: project_folder + "/img/",
		font: project_folder + "/font/",
	},

	src:{
		html: [source_code + "/*.html", "!" + source_code + "/_*.html"],
		css: source_code + "/scss/style.scss",
		js: source_code + "/js/main.js",
		img: source_code + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
		font: source_code + "/font/*.ttf",
	},

	watch:{
		html: source_code + "/**/*.html",
		css: source_code + "/scss/**/*.scss",
		js: source_code + "/js/**/*.js",
		img: source_code + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
	},
	 
	clean:"./" + project_folder + "/"	 
}

let {src, dest} = require('gulp'),
	gulp = require ("gulp"),
	browsersync = require ("browser-sync").create(),
	fileinclude = require ("gulp-file-include"),
	del = require ("del"),
	scss = require ("gulp-sass"),
	autoprefixer = require ("gulp-autoprefixer"),
	media_queries = require ("gulp-group-css-media-queries"),
	clean_css = require ("gulp-clean-css"),
	rename = require ("gulp-rename"),
	uglify = require ("gulp-uglify-es").default,
	imagemin = require ("gulp-imagemin"),
	webp = require ("gulp-webp"),
	webphtml = require ("gulp-webp-html"),
	webpcss = require ("gulp-webpcss"),
	svgSprite = require ("gulp-svg-sprite"),
	ttf2woff = require ("gulp-ttf2woff"),
	tt2woff = require ("gulp-ttf2woff2"),
	fonter = require ("gulp-fonter");

function browserSync(params){
	browsersync.init({
		server:{
			baseDir:"./" + project_folder + "/"
		},
		port:3000,
		notify:false
	})
}

function html(){
	return src(path.src.html)	
		.pipe(fileinclude())
		.pipe(webphtml())
		.pipe(dest(path.build.html))
		.pipe(browsersync.stream())
}

function css(){
	return src(path.src.css)
		.pipe(
			scss({
				outputStyle:"expanded"
			})
		)
		.pipe(
			media_queries()
		)
		.pipe(
			autoprefixer({
				overrideBrowserlist: ["last 5 versions"],
				cascade: true
			})
		)
		.pipe(webpcss())
		.pipe(dest(path.build.css))
		.pipe(clean_css())
		.pipe(
			rename({
				extname:".min.css"
			})
		)
		.pipe(dest(path.build.css))
		.pipe(browsersync.stream())
}

function js(){
	return src(path.src.js)	
		.pipe(fileinclude())
		.pipe(dest(path.build.js))
		.pipe(
			uglify()
		)
		.pipe(
			rename({
				extname:".min.js"
			})
		)
		.pipe(dest(path.build.js))
		.pipe(browsersync.stream())
		
}

function images(){
	return src(path.src.img)
		.pipe(dest(path.build.img))
		.pipe(src(path.src.img))
		.pipe(
			webp({
				quality:70
			})
		)
		.pipe(
			imagemin({
				interlaced:true,
				progressive:true,
				optimizationLevel:3,
				svgoPlugins:[{removeViewBox:true}]	
			})
		)
		.pipe(dest(path.build.img))
		.pipe(browsersync.stream())
}

// function fonts(){
// 	src(path.src.fonts)
// 		.pipe(tt2woff())
// 		.pipe(dest(path.build.fonts));

// 	return(path.src.fonts)
// 		.pipe(ttf2woff2())
// 		.pipe(dest(path.build.fonts));
// };

gulp.task("svgSprite", function(){
	return gulp.src([source_code + "/iconsprite/*.svg"])
	.pipe(svgSprite({
		mode:{
			stack:{
				sprite:"../icons/icons.svg",
				example:true
			}
		},
	}
	))
	.pipe(dest(path.build.img))
})

function watchFiles(params){
	gulp.watch([path.watch.html], html);
	gulp.watch([path.watch.css], css);
	gulp.watch([path.watch.js], js);
	gulp.watch([path.watch.img], images);
}

function clean(params){
	return del(path.clean);
}

let build = gulp.series(clean, gulp.parallel(js, css, html, images));
let watch=gulp.parallel(build, watchFiles, browserSync);

// exports.fonts = fonts;
exports.images = images;
exports.js = js;
exports.css = css;
exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;

[Евгений Щербаков]

Попробуйте в package.json добавить "type": "module"

[BludFIRE]

Евгений Щербаков, куда именно? В devDependencies?

[Евгений Щербаков]

Нет, просто ключ в корне

[BludFIRE]

Евгений Щербаков, не не помогло

Answer 2

[BludFIRE]

Установил axios как Dependency, но потом наткнулся на такую проблему