Skip to content

axios

axios : 是一个基于 Promise 的 HTTP 库,可以在浏览器和 node.js 中使用;可以用它在浏览器中发起 Ajax 请求。

Axios 的 baseURL 配置方法

方法一:全局配置

ts
// 在引入 Axios 后,设置全局的 baseURL
axios.defaults.baseURL = 'https://mockApi.test';

方法二:实例化配置

为每个 Axios 实例单独配置 baseURL 。这种方法适用于需要同时与多个服务器进行交互的应用程序。

ts
// 创建一个 Axios 实例并设置 baseURL
const apiInstance = axios.create({
  baseURL: 'https://mockApi.test'
});

// 使用该实例发送请求
apiInstance.get('/users')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

方法三:临时配置

临时更改 baseURL ,而不影响全局或实例级别的配置。这可以通过在请求的配置中指定 baseURL 来实现

ts
axios.get('/posts', {
  baseURL: 'https://tempApi.example.com'
})
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

方法四:通过拦截器动态配置

根据特定条件动态地改变 baseURL ,你可以使用 Axios 的请求拦截器,在发送请求之前修改配置。

ts
import axios from 'axios';

// 创建 Axios 实例
const api = axios.create();

// 添加请求拦截器
api.interceptors.request.use(config => {
  // 在这里根据条件设置 baseURL
  if (config.url.slice(0, 8) == '/mockApi') {
    config.baseURL = 'https://mockApi.test'
  } else {
    config.baseURL = 'https://api.test'
  }
  return config;
});

// 发起请求,实际请求的 URL 是根据请求拦截器中的 baseURL 动态决定的
api.get('/posts')
.then(response => {
  // 处理响应数据
  console.log(response.data);
})
.catch(error => {
  // 处理错误
  console.error(error);
});