标签：axios iplas
axios
基于promise用于浏览器和node.js的http客户端
特点:
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 自动转换JSON数据
- 浏览器端支持防止CSRF(跨站请求伪造)
安装
1、npm安装
$ npm install axios
2、bower安装
$ bower install axios
3、通过cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Easy Demo
#Get request
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
#Post request
axios.post('/save', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
多请求demo
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
axios api
可以通过导入相关配置发起请求
1、axios(config)
// 获取远程图片
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
2、axios(url[, config])
// 发起一个GET请求（GET是默认的请求方法）
axios('/user/12345');
3、可用的api别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
#注：当使用以上别名方法时，url，method和data等属性不用在config重复声明。
拦截器语法
/ 添加一个请求拦截器
axios.interceptors.request.use(function (response) {
// Do something before request is sent
return response;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
拦截器demo，添加响应拦截器，统一处理服务器响应和异常
/**
* 添加响应拦截器，统一处理服务器响应和异常
*/
axios.interceptors.response.use(
response => {
return response
},
error => {
/**
* 状态码401代表无权限访问，权限失效，需要重新获取authToken
* 状态码500代表REST服务器异常
*/
const status = error.response.status
const message = error.response.data.meta.message
if (status === 401) {
/**
* 登录授权token超时，提示
*/
if (message.indexOf('ERROR_CODE_001') > -1) {
this.$message.error(errorCode.ERROR_CODE_001)
}
window.location.href = `${window.location.origin}/login`
return Promise.reject(error)
}
/**
* 1.处理系统服务异常
* 2.处理SoaException异常
*/
if (status === 500) {
if (message.indexOf('ERROR_CODE_003') > -1) {
this.$message.error(errorCode.ERROR_CODE_003)
return
}
this.$message.error(message)
}
return Promise.reject(error)
}
)
封装axios api http.js，便捷方法调用
/**
* http.js
* 封装axios，
* 调用方法:
* http.get('/api/enquiry/web/query',{id:1}).then((res)=>{你的操作})
* http.post('/api/enquiry/web/update',{id:1}).then((res)=>{你的操作})
* http.postFormData('/api/enquiry/web/update',{id:1,file:file}).then((res)=>{你的操作})
*/
import axios from 'axios'
export default {
/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
get (url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
},
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
post (url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
},
/**
* postFormData方法，对应post请求，用来提交文件+数据
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
postFormData (url, params) {
return new Promise((resolve, reject) => {
axios({
headers: {
'Content-Type': 'multipart/form-data'// ;boundary=----WebKitFormBoundaryQ6d2Qh69dv9wad2u
},
transformRequest: [function (data) { // 在请求之前对data传参进行格式转换
const formData = new FormData()
Object.keys(data).forEach(key => {
formData.append(key, data[key])
})
return formData
}],
url,
method: 'post',
data: params
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
}
