前端面试题(三):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 请求时更好地管理和优化请求。

相关推荐
excel5 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着6 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友7 小时前
什么是API签名?
前端·后端·安全
会豪9 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子9 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶9 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子9 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_9 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233310 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin10 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js