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

相关推荐
0思必得032 分钟前
[Web自动化] Selenium处理滚动条
前端·爬虫·python·selenium·自动化
Misnice34 分钟前
Webpack、Vite、Rsbuild区别
前端·webpack·node.js
青茶36035 分钟前
php怎么实现订单接口状态轮询(二)
前端·php·接口
大橙子额1 小时前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
爱喝白开水a3 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
董世昌413 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
吃杠碰小鸡4 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone4 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09014 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农4 小时前
Vue 2.3
前端·javascript·vue.js