Axios的基本使用

最新推荐文章于 2025-05-18 12:34:13 发布

原创最新推荐文章于 2025-05-18 12:34:13 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

axios 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了axios库的基础使用，包括GET请求、并发请求的实现方式。通过axios.all()结合axios.spread()展示了如何处理并发请求的结果，同时演示了如何设置全局配置如baseURL和超时时间。此外，还讲解了如何创建axios实例以复用配置，并提供了实例化的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.axios的基本使用

axios({
  url: "...................",
  method: 'get'
}).then(res => {
  console.log(res)
})

2.axios发送并发请求

axios.all(
  [ axios({
      url: "...................",
    }),
    axios({
      url: ".....................",
      params: {
        type: '....',
        page: ....
      }
    })
  ]).then(results => {
    console.log("并发结果",results);
  }
)

3.并发请求结果分开

axios.all(
  [ axios({
      url: ".....................",
    }),
    axios({
      url: ".....................",
      params: {
        type: '......',
        page: ......
      }
    })
  ]).then(axios.spread((res1,res2) => {
    console.log("并发结果分开",res1,res2);
  }))

4.抽取baseURL

//比如两个接口a/b/c 和 a/v/w
axios.defaults.baseURL = 'a',
axios.defaults.timeout = 5000    // 客户端请求服务器的时间

axios.all(
  [ axios({
      url: "/b/c",
    }),
    axios({
      url: "/v/w",
      params: {
        type: '......',
        page: ......
      }
    })
  ]).then(axios.spread((res1,res2) => {
    console.log("并发结果分开",res1,res2);
  }))

5.创建对应的axios的实例

const instance1 = axios.create({
  baseURL: 'a',
  timeout: 5000
})

instance1({
  url: '/b/c'
}).then(res => {
  console.log(res);
})

instance1({
  url: '/v/w',
  params: {
    type: '....',
    page: ....
  }
}).then(res => {
  console.log(res);
})