前端面试题(三):axios有哪些常用的方法

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

1. axios.get()

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

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

2. axios.post()

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

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

3. axios.put()

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

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

4. axios.patch()

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

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

5. axios.delete()

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

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

6. axios.all()

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

    javascript 复制代码
    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 实例,可以复用配置并改变默认的设置(如 baseURLheaderstimeout 等)。

    javascript 复制代码
    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

  • 用于拦截请求或响应。你可以使用 requestresponse 拦截器来对请求和响应进行处理(例如,设置公共请求头、处理错误等)。

    请求拦截器

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

    响应拦截器

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

9. axios.getUri()

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

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

10. axios.request()

  • axios.request() 是一个通用的方法,所有 HTTP 请求方法(如 getpostputdelete)都可以通过该方法来发送。你可以通过传入配置对象来执行请求。

    javascript 复制代码
    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 请求时更好地管理和优化请求。

相关推荐
我爱吃干果4 分钟前
ZoomCharts使用方法
前端·javascript·笔记·zoom
旧厂街小江14 分钟前
LeetCode 第111题:二叉树的最小深度
前端·算法·程序员
&白帝&15 分钟前
vue实现大转盘抽奖
前端·javascript·vue.js
DataFunTalk18 分钟前
不是劝退,但“BI”基础不佳就先“别搞”ChatBI了!
前端·后端
古德奈特22 分钟前
npm 和 npx 的区别详解
前端
big凉笙墨染24 分钟前
Web安全小白看不懂HTTP协议?一文带你精通HTTP基础知识,Web安全入门必读【娱乐篇】
前端·安全·黑客
Riesenzahn24 分钟前
使用CSS3+SVG绘制沿固定路径飞行的纸飞机
前端·javascript
打野赵怀真26 分钟前
请说说在Angular中的自举是什么?
前端·javascript
LaoZhangAI35 分钟前
【2025最新】Dify接入GPT-4o完全指南:8种稳定高效使用方法
前端·后端
逻辑星辰38 分钟前
LogicFlow-前端流程图开发
前端·vue·流程图·logicflow