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

相关推荐
qingyun9892 小时前
深度优先遍历:JavaScript递归查找树形数据结构中的节点标签
前端·javascript·数据结构
熬夜敲代码的小N2 小时前
Vue (Official)重磅更新!Vue Language Tools 3.2功能一览!
前端·javascript·vue.js
90后的晨仔2 小时前
用 Python 脚本一键重命名序列帧图片的名称
前端
辰同学ovo2 小时前
Vue 2 路由指南:从入门到实战优化
前端·vue.js
小彭努力中2 小时前
1.在 Vue 3 中使用 Cesium 快速展示三维地球
前端·javascript·vue.js·#地图开发·#cesium·#vue3
一字白首2 小时前
Vue3 进阶,新特性 defineOptions/defineModel+Pinia 状态管理全解析
前端·javascript·vue.js
90后的晨仔2 小时前
🛠️ 为什么配置 ~/.ssh/config 后,Sourcetree 就能正常推送了?
前端
Sylus_sui2 小时前
Vue2 与 Vue3 数据双向绑定:区别与原理详解
前端·javascript·vue.js
ConardLi3 小时前
AI:我裂开了!现在的大模型评测究竟有多变态?
前端·人工智能·后端
这是你的玩具车吗3 小时前
能和爸妈讲明白的大模型原理
前端·人工智能·机器学习