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