一、Axios 简介
1.1 特性
Axios是一个基于 Promise 的 HTTP 客户端，拥有以下特性：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
1.2 安装
使用 npm:
$ npm install axios
使用 yarn:
$ yarn add axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1.3 axios请求方法
主要有get，post，put，patch，delete
-
get
获取数据
-
post
提交数据（表单提交+文件上传）
-
put
更新数据（将所有数据均推放到服务端）
-
patch
更新数据（只将修改的数据推送到后端）
-
delete
删除数据
二、Axios请求
1.1 get
调用型
axios.get(url).then((res)=>{
console.log(res)
})
axios()型
axios({
method:'get',
url:url
}).then((res)=>{
console.log(res)
})
有参调用型
axios.get(url,{
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
有参axios()方法型
axios({
method:'get',
url:url,
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
1.2 post
调用型
axios.post('/post',{},config)
post方法有三个参数，分别是url、数据、config。config参数暂时不讨论。
一般上传的数据分两种
- form-data 表单提交（图片上传、文件上传）
- application/json
- 以上两种数据，都可以在请求发起后，进入浏览器network查看请求头中的content-type进行查看
假设我们现在要上传一个数据：
let data = { id:12 }
那么我们可以直接将其传入：
axios.post('/post',data).then((res)=>{
console.log(res)
})
axios()方法型
axios({
method:'post',
url:'/post',
data:data
}).then(...)
1.3 put方法和patch方法
形式与post方法大体相同
1.4 delete方法
url删除法
//直接从url里面删除
axios.delete('/data.json',{
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
请求体删除法
axios.delete('/data.json',{
data:{
id:12
}
}).then((res)=>{
console.log(res)
})
两种方法的删除方式是不同的，具体使用需要和后端沟通。
1.5 并发请求 axios.all
执行多个并发请求
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) {
// 两个请求现在都执行完成
}));
三、Axios配置
在项目上安装好axios后，需要对axios进行一些基本的配置。
3.1 基本配置
// 创建axios实例
let service = axios.create({
baseURL: 'https://api.example.com' // api的base_url
timeout: 5000 // 请求超时时间
withCredentials: true,// 允许携带cookie
})
3.2 请求拦截器配置
设置和取消请求拦截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
请求拦截器我们一般和token连用，实现用户权限的认证。
利用vuex的数据仓库存储token
// request拦截器
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers = {
'Authorization' : "Token " + getToken('Token'), //携带权限参数
};
}
return config
}, error => {
Promise.reject(error)
})
利用本地存储存储token
// 请求拦截
service.interceptors.request.use(config => {
// confing.url可拿到当前页面路径，出去登陆页面，其它的页面携带token
if (config.url !== '/login') {
var token = localStorage.getItem('token')
// 请求头携带token
config.headers.Authorization = token
}
return config
}, error => {
return Promise.reject('请求出错')
})
3.3 响应拦截器配置
这块需要跟服务端约定接口响应全局码，从而统一处理登录校验失败，无权限，成功等结果。
// respone拦截器
service.interceptors.response.use(
response => {
/**
* status:200,接口正常返回;
*/
const res = response.data
if (res.status !== 200) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
// 根据服务端约定的状态码：5001:非法的token; 5002:其他客户端登录了; 5004:Token 过期了;
if (res.code === 5001 || res.code === 5002 || res.code === 5004) {
MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('LogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
}
return Promise.reject('error')
} else { // res.code === 200,正常返回数据
return response.data
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
这方面的内容就比较多了，不同的项目有不同的需求，在这里就不做赘述了。
这个实例代码用了vuex的数据仓库和Element UI组件的弹框组件。
四、优缺点总结
axios的优缺点：
- 在浏览器中创建XMLHttpRequest请求，在node.js中创建http请求。
- 解决回调地狱问题。
- 自动转化为json数据类型。
- 支持Promise技术，提供并发请求接口。
- 可以通过网络请求检测进度。
- 提供超时处理。
- 浏览器兼容性良好。
- 有拦截器，可以对请求和响应统一处理。
