axios数据请求配置
1.创建axios.js配置文件
axios配置一般会复杂很多,此处简单为例
// 本地url
const baseURL = 'http://localhost:8080'
const version = '/api/v1'
// 创建一个axios实例
const instance = axios.create({
baseURL: baseURL + version,
timeout: 7000,
headers: {}
})
// 封装请求拦截器
instance.interceptors.request.use(function (config) {
// 加token,用于后端鉴权(识别用户)
config.headers.Authorization = localStorage.getItem('token')
return config;
}, function (error) {
return Promise.reject(error);
})
// 封装响应拦截器
instance.interceptors.response.use(function (response) {
let res = null
// 数据过滤
if(response.data) {
let err = response.data.err
if(err===0) {
res = response.data.data
}else if(err===-1) {
// 处理token无效的情况
message.error(response.data.msg)
localStorage.removeItem('token')
window.location.reload()
}else{
message.error(response.data.msg)
}
}
return res
}, function (error) {
return Promise.reject(error)
})
export default instance
2.创建api.js文件 专门放置各种请求api的方法
// 引入以上配置的axios文件
import axios from './axios'
export function fetchQQ(params) {
return axios({
url: '接口api',
method: 'GET',
params
})
}
跨域配置
vue一般在vue.config.js文件,没有的话自己建一个, react找到webpack.config.js文件,脚手架搭建找到webpackDevSever.config.js文件 找到关键字段配置如下
devServer: {
proxy: {
// 端口号后面第一个字段
'/api': {
target: 'https://baidu.com',// 请求的目标地址
changeOrigin: true // 是否改变请求地址(是否跨域)
}
}
}
webpack devServer.proxy配置文档:https://www.webpackjs.com/configuration/dev-server/#devserver-proxy
也可以使用 http-proxy-middleware插件,源文档: https://github.com/chimurai/http-proxy-middleware#options
调用配置好的api就可以和后端进行欢快的数据交互了