我在Vue.js axios配置文件中有:
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000/api/v1';
因此，我不必在整个应用程序的所有API请求中使用URL. 现在，我在src文件夹中的Angular17项目中创建了axios.ts文件:
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000/api/v1';
export default axios;
但我不知道在整个应用程序中全局使用它，也不知道在每个服务文件中都导入它.
我想要改变:
const res = await axios.get(http://localhost:8000/api/v1/card);
至
const res = await axios.get('/card');
那么，导入所需的内容是通常的方式，而不是具有全局配置和设置，这就是为什么使用AXIOS的create a service要好于create a service，然后在需要的地方导入它.
但是您可以通过angular.json添加axios globally to the runtime global scope，然后在根组件中设置您的配置(或者通过index.html中的CDN脚本标签加载它):
"scripts": [
"node_modules/axios/dist/axios.min.js"
],
修改根组件中的设置:
// usage with typescript
// declare var axios:any;
export class App {
constructor() {
axios.defaults.baseURL = 'http://localhost:3000/api/v1';
}
}
bootstrapApplication(App);
然后在某些组件中:
// usage with typescript
// declare var axios:any;
export class SomeComponent {
async ngOnInit() {
const res = await axios.get('/card');