axios设置baseURL：详细阐述及代码示例

一、axios设置baseURL的封装

在日常开发中，我们可能会使用axios来发起请求，为了方便管理请求的接口，我们可以统一设置一个baseURL。以下是一种封装axios的方式：


import axios from 'axios'

const service = axios.create({
  baseURL: 'http://api.example.com'
  timeout: 5000
})

export default service

以上代码中，我们使用axios.create方法创建了一个axios实例，并设置了baseURL和超时时间timeout。这样在之后的网络请求中，只需要调用service对象即可。

二、axios设置headers

有些接口需要我们在请求时设置一些自定义的headers，例如我们需要在每个请求中携带token。下面是一个简单的示例：


import axios from 'axios'

const service = axios.create({
  baseURL: 'http://api.example.com'
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    config.headers['token'] = sessionStorage.getItem('token')
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

export default service

以上代码中，我们通过.service.interceptors.request.use()方法，在请求前拦截请求的config对象，并设置了自定义的headers。这样token就会在每个请求中被携带。

三、axios设置超时时间

有时我们需要设置请求的超时时间，以便在请求处理时间过长时，能够及时做出响应。下面是一个简单的示例：


import axios from 'axios'

const service = axios.create({
  baseURL: 'http://api.example.com'
  timeout: 5000
})

export default service

以上代码中，我们通过在创建axios实例时，设置timeout属性来设置超时时间，单位是毫秒。如果请求超时，会进入catch回调中。

四、axios设置cookie

在某些情况下，我们可能需要将cookie存储在客户端，并在之后的请求中自动携带。下面是一个简单的示例：


import axios from 'axios'

const service = axios.create({
  baseURL: 'http://api.example.com',
  withCredentials: true,
  timeout: 5000
})

export default service

以上代码中，我们在创建axios实例时，设置withCredentials属性为true，这样请求会自动携带cookie。

五、axios设置请求超时时间

我们也可以在单个请求中，设置该请求的超时时间。以下是一个示例：


import axios from 'axios'

axios({
  method: 'get',
  url: '/user',
  timeout: 5000
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

以上代码中，我们在发送请求时，通过在config中设置timeout属性来设置单个请求的超时时间。

六、axios设置header

有些情况下，后端会要求我们在请求中设置header。以下是一个示例：


import axios from 'axios'

axios({
  method: 'post',
  url: '/user',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    username: 'admin',
    password: '123456'
  }
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

以上代码中，我们在发送请求时，通过在config中设置headers属性来设置header。

七、axios设置接口永不超时

有时我们需要将一些接口设置永不超时，例如一些长轮询的接口。以下是一个示例：


import axios from 'axios'

axios({
  method: 'get',
  url: '/stream',
  timeout: 0
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

以上代码中，我们在发送请求时，通过设置timeout属性为0来永不超时。

八、axios设置请求头header

有时后端服务器会要求设置请求头的origin，否则请求会被拒绝。下面是一个示例：


import axios from 'axios'

axios.defaults.headers.common['origin'] = 'http://example.com'

axios({
  method: 'get',
  url: '/user',
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

以上代码中，我们通过设置axios.defaults.headers.common来设置header。

九、axios设置header解决跨域

在跨域请求时，有些后端服务器可能会检查origin，防止跨域攻击。我们可以在header中设置请求的origin，以下是一个示例：


import axios from 'axios'

axios({
  method: 'get',
  url: 'http://example.com/user',
  headers: {
    'origin': 'http://example2.com'
  },
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

以上代码中，我们在请求头中设置origin，使其能够通过跨域检查。

总结

以上是对axios设置baseURL的详细阐述及代码示例。通过以上的介绍，相信大家对axios设置baseURL会有更深入的理解。

原创文章，作者：XEYN，如若转载，请注明出处：https://www.506064.com/n/134438.html