axios.create()的使用

最新推荐文章于 2023-01-05 21:48:22 发布

都挺好，刚刚好

最新推荐文章于 2023-01-05 21:48:22 发布

阅读量1.2k

点赞数 1

分类专栏：项目文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/seimeii/article/details/126175088

版权

项目专栏收录该内容

75 篇文章 0 订阅

订阅专栏

axios.create(config)

根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置
新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的

3.为什么要设计这个语法?

需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要
求的接口请求中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>axios.create()</title>
</head>
<body>
  <!-- 
  1). axios.create(config)
    a. 根据指定配置创建一个新的axios, 也就就每个新axios都有自己的配置
    b. 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
    c. 为什么要设计这个语法?
      需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
      解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中
  -->
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
  <script>
    axios.defaults.baseURL = 'http://localhost:3000'

    // 使用axios发请求
    axios({
      url: '/posts' // 请求3000
    })

    // axios({
    //   url: '/xxx' // 请求4000
    // })

    const instance = axios.create({
      baseURL: 'http://localhost:4000'
    })

    // 使用instance发请求
    // instance({
    //   url: '/xxx'  // 请求4000
    // })
    instance.get('/xxx')
  </script>
</body>
</html>

const service = axios.create({
  baseURL: '', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 12000 // request timeout
})