在src目录下创建一个api的目录,然后在api目录下创建request.js文件,并引入axios如下:
import axios from "axios"
// 第一种创建axios实例方法
const service = axios.create({
baseURL: 'http://localhost:8888', // api的base_url
timeout: 5000 // 请求超时时间
})
// 第二种创建axios示例方法
let service = axios.create({
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
也可以在创建时指定请求数据的格式,参考代码如下:
// 创建axios实例
const service = axios.create({
baseURL: 'http://localhost:8888', // api的base_url
timeout: 5000, // 请求超时时间
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
关于POST
请求的常见数据格式(content-type):
这个拦截器会在你发送请求之前运行
我的这个请求拦截器的功能是为我每一次请求去判断是否有token,如果token存在则在请求头加上这个token。后台会判断我这个token是否过期。
// 拦截请求
service.interceptors.request.use(
config => {
console.log("request url="+config.url)
// config.baseURL = '/user/'
// config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
config.timeout = 6000
let token = sessionStorage.getItem('token')
if (token) {
config.headers.Authorization = token;
config.headers = {
'token': token,
// 'Content-Type': 'application/x-www-form-urlencoded'
}
}
return config
},
error => {
return Promise.reject(error)
}
)
// 拦截响应
service.interceptors.response.use(
response => {
// 定时刷新token
console.log(response.data)
return response
},
error => {
return Promise.reject(error)
}
)
export default service
import service from './axios'
/* 验证登陆 */
export function handleLogin (data) {
return service.post('/ds/user/login', data)
}
参考文章: