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