您的位置:

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会有更深入的理解。