前端面试题（三）：axios有哪些常用的方法

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一些常用的方法来处理不同类型的请求。以下是 Axios 中常用的一些方法：

1. axios.get()

• 用于发送 GET 请求，从服务器获取数据。

  axios.get('/api/data')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  

2. axios.post()

• 用于发送 POST 请求，向服务器发送数据。

  axios.post('/api/data', { name: 'John', age: 30 })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  

3. axios.put()

• 用于发送 PUT 请求，更新指定资源的完整数据。

  axios.put('/api/data/1', { name: 'John', age: 31 })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  

4. axios.patch()

• 用于发送 PATCH 请求，部分更新指定资源的数据。

  axios.patch('/api/data/1', { age: 32 })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  

5. axios.delete()

• 用于发送 DELETE 请求，删除指定资源。

  axios.delete('/api/data/1')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  

6. axios.all()

• 用于发送多个并发请求，返回一个 Promise，并且可以在所有请求都完成后执行回调。

  axios.all([
    axios.get('/api/data1'),
    axios.get('/api/data2')
  ])
  .then(axios.spread((response1, response2) => {
    console.log(response1.data, response2.data);
  }))
  .catch(error => {
    console.error(error);
  });
  

7. axios.create()

• 用于创建一个自定义配置的 Axios 实例，可以复用配置并改变默认的设置（如 baseURL、headers、timeout 等）。

  const instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 1000,
    headers: { 'X-Custom-Header': 'foobar' }
  });
  
  instance.get('/data')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  

8. axios.interceptors

• 用于拦截请求或响应。你可以使用 request 和 response 拦截器来对请求和响应进行处理（例如，设置公共请求头、处理错误等）。

  请求拦截器：

  axios.interceptors.request.use(
    config => {
      // 在请求发送前做一些处理
      config.headers.Authorization = 'Bearer token';
      return config;
    },
    error => {
      return Promise.reject(error);
    }
  );
  

  响应拦截器：

  axios.interceptors.response.use(
    response => {
      // 处理响应数据
      return response;
    },
    error => {
      // 错误处理
      return Promise.reject(error);
    }
  );
  

9. axios.getUri()

• 用于获取请求的 URL，它不会发送请求，只是返回请求的 URL 字符串。

  const url = axios.getUri({
    url: '/api/data',
    params: {
      id: 123
    }
  });
  console.log(url); // 输出拼接好的完整 URL
  

10. axios.request()

• axios.request() 是一个通用的方法，所有 HTTP 请求方法（如 get、post、put、delete）都可以通过该方法来发送。你可以通过传入配置对象来执行请求。

  axios.request({
    url: '/api/data',
    method: 'get',
    params: {
      id: 123
    }
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
  

---

总结：

• axios.get(), axios.post(), axios.put(), axios.patch(), axios.delete() 是常用的 HTTP 方法，用于不同的请求类型。
• axios.all() 用于处理多个并发请求。
• axios.create() 用于创建自定义配置的实例。
• axios.request() 是一个通用方法，可以处理所有类型的请求。
• axios.interceptors 用于处理请求和响应的拦截器。

这些方法和功能提供了很大的灵活性，可以帮助你在处理 API 请求时更好地管理和优化请求。