1.简介
Axios 是一个基于promise的HTTP库,可以用在浏览器和node.js中。
官方网站 http://www.axios-js.com/zh-cn/docs/
2.特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
3.安装
$ npm install axios
4.代码封装
1.创建axios实例
const service = axios.create({
baseURL: ‘/api’, // api base_url
timeout: 6000 // 请求超时时间
})
2.拦截器
请求拦截器
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
config.headers['Access-Token'] = token
config.headers['X-Requested-With'] = 'XMLHttpRequest'
return config;
}, err);
// 添加响应拦截器
service.interceptors.response.use((response) => {
// 对响应数据做点什么
return response;
}, err)
网络请求部分
// post
export function postAction (url, parameter) {
return axios({
url: url,
method: 'post',
data: parameter
})
}
// put
export function putAction (url, parameter) {
return axios({
url: url,
method: 'put',
data: parameter
})
}
// get
export function getAction (url, parameter) {
return axios({
url: url,
method: 'get',
params: parameter
})
}
// deleteAction
export function deleteAction (url, parameter) {
return axios({
url: url,
method: 'delete',
params: parameter
})
}
/**
* 下载文件 用于excel导出
* @param url
* @param parameter
* @returns {*}
*/
export function downFile (url, parameter) {
return axios({
url: url,
params: parameter,
method: 'get',
responseType: 'blob'
})
}
/**
* 下载文件 用于excel导出,自定义用于post请求
* @param url
* @param parameter
* @returns {*}
*/
export function exportXsl (url, parameter) {
return axios({
url: url,
data: parameter,
method: 'post',
responseType: 'blob'
})
}