基础库:vue+axios
使用axios封装接口请求,在所有请求的headers中加入signature字段给后端做合法校验。先上代码
// 创建 axios 实例
const itAxios = axios.create({
baseURL: 'https://......', // api base_url
timeout: 9000, // 请求超时时间
validateStatus: status => {
return status < 600
},
...configs
})
/**
* ajax 公用方法
* @param {String} method 请求方式
* @param {String} [url=''] 请求的URL
* @param {Object} [args={}] 请求参数
* @param {} [config=configs] 请求头类型设置
* @returns
*/
const ajax = (method, url = '', args = null, config = {}) => {
let response = {}
let cgs = {
headers: {
...configs.headers,
...config
}
}
try {
response = itAxios[method](url, args, cgs)
} catch (e) {
response = e.response
}
return response
}
// 以get请求为例
const request = {
fetch: (url, args, authorize = false) => {
let param = formatParameter(url, args)
url = `${param.url}?${qs.stringify(param.args)}`
let signature = '自定义的校验码'
return ajax('get', url, null, { authorize, signature })
}
}
// request interceptor
itAxios.interceptors.request.use(config => {
console.log('-----------interceptors-config----------------', config)
if (config.headers.authorize) {
config.headers['Authorize'] = true
} else if (config.headers.signature) {
config.headers['signature'] = config.headers.signature // 让每个请求携带自定义 signature
}
delete config.headers.authorize
return config
}, (error) => {
return Promise.reject(error)
})
export default request
调用get请求时,在interceptors中打印config.headers.authorize和config.headers.signature,都返回undefined。
但post/put等类型都能正常拿到authorize和signature的值。
查阅资料发现axios的get请求长这样
axios.get(url, { headers: { ... } })
而post请求长这样
axios.post(url, args, { headers: { ... } })
所以得到解决办法:在ajax方法中添加一个判断
const ajax = (method, url = '', args = null, config = {}) => {
let response = {}
let cgs = {
headers: {
...configs.headers,
...config
}
}
try {
// 添加一个判断
if ((method === 'get' || method === 'delete') && !args) {
response = itAxios[method](url, cgs)
} else {
response = itAxios[method](url, args, cgs)
}
} catch (e) {
response = e.response
}
return response
}
请求方式参考:
axios#request(config)
axios#post(url[, data[, config]])