Axios
Axios 是什么
- Axios 是一个基于 promise 的 HTTP 库
- 可以用于浏览器和 node.js
Axios 有哪些特性
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
Axios 浏览器支持
Axios 基础用法
axios 请求方法：get、post、put、patch、delete
- get：获取数据
- post：提交数据（表单提交 + 文件上传）
- put：更新数据（所有数据推送到后端）
- patch：更新数据（只将修改的数据推送到后端）
- delete：删除数据
get 请求
1
2
3
4
5
6
7
8
9
| axios.get("/data.json",
{ params: { id: 12, } }
).then((res) => {
if(res.status== 200){
console.log(res.data);
}})
.catch((err) => {
console.log(err);
});
|
1
2
3
4
5
6
7
8
9
10
11
| axios({
method: "get",
url: "/data.json",
params: { id: 12, },
}) .then((res) =>{
if (res.status == 200){
console.log(res.data);
} })
.catch((err) => {
console.log(err);
});
|
post 请求
常用提交数据方式
- application/json：json 格式
- application/x-www-form-urlencoded
- multipart/form-data：表单提交
application/json
1
2
3
4
5
6
7
| axios .post("/post",{ id: 12 })
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
|
1
2
3
4
5
6
7
| axios({ method: "post", url: "/post", data: { id: 12 }, })
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| let data = { id: 12, };
let formData = new FormData();
for (let key in data) {
formData.append(key, data[key]);
}
axios .post("/post", formData)
.then((res) =>{
console.log(res);
})
.catch((err) => {
console.log(err);
});
import qs from 'qs'
import request from '@/utils/request'
//user api
// 用户信息
export function getUserInfo(params) {
return request({
url: '/user/userinfo',
method: 'post',
data: qs.stringify(params),
hideloading: true // 隐藏 loading 组件
})
}
|
put 请求
1
2
3
4
| axios.put('/put',{ id: 12 })
.then(res=>{
console.log(res);
})
|
patch 请求
1
2
3
4
| axios.patch('/patch',{ id: 12 })
.then(res=>{
console.log(res);
})
|
delete 请求
1
2
3
4
5
6
| axios .delete("/delete", { params: { id: 12 } })
.then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
});
|
1
2
3
4
5
6
| axios .delete("/delete", { data: { id: 12 } })
.then((res) => {
console.log(res);
}) .catch((err) => {
console.log(err);
});
|
并发请求
并发请求：同时进行多个请求，并统一处理返回值
1
2
3
4
5
| axios.all([ axios.get('/data.json'), axios.get('/city.json') ])
.then(
axios.spread((dataRes,cityRes)=>{
console.log(dataRes,cityRes)
}) )
|
Axios 进阶用法
创建 axios 实例
1
2
3
4
5
6
7
| let instance = axios.create({
baseURL: "http://localhost:8080", timeout: 2000,
});
instance .get("/data.json", { params: { id: 12, }, })
.then((res) => {
console.log(res);
});
|
实例的配置
配置
1
2
| let instance = axios.create({ baseURL: "http://localhost:8080", timeout: 2000,
ur:'/data.json', method:'get', headers: { token:'' }, params: {}, data: { } });
|
配置优先级：全局配置 < 实例配置 < 请求配置
全局配置
1
| axios.defaults.timeout = 1000; axios.defaults.baseURL = 'http://localhost:8080'
|
实例配置
1
| let instance = axios.create(); instance.defaults.timeout = 3000;
|
请求配置
1
2
3
4
| instance .get("/data.json",{ params: { id: 12, }, }, { timeout: 5000, } )
.then((res) => {
console.log(res);
});
|
实际开发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| let instance = axios.create({
baseURL: "http://localhost:8080",
timeout: 1000
});
let instance1 = axios.create({
baseURL: "http://localhost:9090",
timeout:3000
});
instance .get("/data.json", { params: { id: 12, }, })
.then((res) => {
console.log(res);
});
instance1 .get("/data.json", { params: { id: 12, }, },{timeout: 5000 })
.then((res) => {
console.log(res);
});
|
拦截器
拦截器：在请求和响应被处理前拦截他们
请求拦截器、响应拦截器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| // 请求拦截器
axios.interceptors.request.use((config) => {
// 在发送请求前做些什么
return config;
},err => {
// 在请求错误的时候做些什么
return Promise.reject(err)
});
// 响应拦截器
axios.interceptors.response.use((res) => {
// 请求成功对响应数据做处理
return res; }, (err) => {
// 响应错误做些什么
return Promise.reject(err);
});
// 取消拦截器
let interceptors = axios.interceptors.request.use((config) => {
config.headers = { auth: true, };
return config;
});
axios.interceptors.request.eject(interceptors);
// 例子 登录状态（token:''）
let instance = axios.create({});
instance.interceptors.request.use((config) => {
config.headers.token = "";
return config;
});
// 移动端开发 let instance_phone = axios.create({});
instance_phone.interceptors.request.use((config) => {
// 加载动画显示
$("#modal").show(); return config;
});
instance_phone.interceptors.response.use((res) => {
// 加载动画隐藏
$("#modal").hide(); return res;
});
|
错误处理
错误处理：请求错误时进行的处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| let instance = axios.create();
// 请求拦截器
instance.interceptors.request.use((config) => {
return config;
}, (error) => {
// 请求错误 一般 http 状态码以 4开头，常见：401超时，404 not found
$("#modal").show();
setTimeout(() => {
$('#modal').hide(); }
,2000);
return Promise.reject(error);
} );
// 响应拦截器
instance.interceptors.response.use( (res) => {
return res;
}, (error) => {
//响应错误处理 一般 http 状态码以 5 开头，500 系统错误，502，系统重启
$("#modal").show(); setTimeout(() => { $('#modal').hide(); },2000); return
Promise.reject(error); } ); instance .get() .then(
(res) => { console.log(res);
}) .catch(
(err) => { console.log(err);
});
|
取消请求
取消请求：用于取消正在进行的 http 请求
1
2
3
4
5
6
7
8
9
| let source = axios.CancelToken.source();
axios .get("/data.json", {
cancelToken:source.token,
}) .then((res) => {
console.log(res);
}) .catch((err) => {
console.log(err);
});
// 取消请求 source.cancel('cancel http')
|
Axios 封装
对 Axios 二次封装
http.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| import axios from "axios";
import service from "./contactApi";
import { Toast } from "vant";
// service 循环遍历输出不同的请求方法
let instance = axios.create({
baseURL: "http://localhost:9000/api",
timeout: 1000,
});
const Http = {};
// 包裹请求方法的容器
for (let key in service) {
let api = service[key]; // url method
// saync 作用：避免进入回调地狱
Http[key] = async (
params, // 请求参数 get:url put, post, patch(data),delete:url
isFormData = false, // 标识是否是form-data 请求
config = {} // 配置参数
)=> {
let newParams = {}; // content-type 是否是 form-data 的判断
if (params && isFormData) {
newParams = new FormData();
for (let key in params) {
newParams.append(key, params[key]);
} }else {
newParams = params;
}
// 不同请求的判断
let response = {};
if (api.method === "put" || api.method === "post" || api.method === "patch" ) {
try{
response = await instance[api.method](api.url, newParams, config);
} catch(error) {
response = error;
}
} else {
config.params = newParams;
try {
response = await instance[api.method](api.url, config);
} catch (error) {
response = error;
}
}
return response; // 返回响应值
};
}
instance.interceptors.request.use( (config) => {
// 发起请求前做些什么
Toast.loading({ mask: false, duration: 0, forbidClick: true, message:"加载中……", });
return config;
}, () => {
// 请求错误 Toast.clear();
Toast("请求错误，请稍后重试"); } );
instance.interceptors.response.use( (res) =>{
Toast.clear(); return res.data;
}, () => {
// 请求错误 Toast.clear();
Toast("请求错误，请稍后重试");
} );
export default Http;
|
接口分离
contactApi.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| const CONTACT_API = {
// 获取联系人列表
getContactList: {
method: "get", url:"/contactList",
},
// 新建联系人
form-data newContactForm: {
method: "post",
url: "/contact/new/form",
},
// 新建联系人
json newContactJson: {
method:"post",
url: "/contact/new/json",
},
// 编辑联系人 editContact: {
method: "put",
url: "/contact/edit",
},
// 删除联系人 delContact: {
method: "delete",
url: "/contact",
}, }
;
export default CONTACT_API;
|
挂载
main.js
1
2
| import Http from "./service/http";
Vue.prototype.$Http = Http;
|
使用
1
2
| async onDelete(info) { let res = await this.$Http.delContact({ id: info.id, });
if (res.code == 200) { Toast("删除成功"); this.getList(); } }
|
总结
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| // http.js
// 封装 axios
import axios from 'axios'
/* 1、创建实例
*不同的地址请求：多个实例、覆盖 baseURL
*/
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
});
// 2、添加请求拦截
instance.interceptors.request.use(function (config) {
// 发送请求前
config.headers.[Token] = '123'
return config;
}, (error) => {
// 请求错误
console.log(error);
return Promise.reject(error);
});
// 3、添加响应拦截
instance.interceptors.response.use((response)=> {
let res = response.data
if(res.code == 200 ){
return res;
}else{
// 错误处理
}
}, (error)=> {
// 错误处理
return Promise.reject(error);
}
default instance;
// article.js
import request from '@/utils/request'
export function fetchList(query) {
return request({
url: '/vue-element-admin/article/list',
method: 'get',
params: query
})
}
// article.vue
import { fetchList } from article.js
fetchList().then(res=>{
console.log(res);
}).catch(err)=>{
console.log(err);
}
|
相关资料
[视频]axios 在 vue 中的使用√
【爬坑日记】利用axios进行post提交formdata
Github axios
npm axios
四种常见的 POST 提交数据方式
FormData
Using FormData Objects
URLSearchParams
Vant 示例
postcss-pxtorem
lib-flexible
browserslist
vue 项目配置 autoprefixer 报出警告问题
vue-element-admin
axios 是如何封装 HTTP 请求的
学习 axios 源码整体架构，打造属于自己的请求库
vue中Axios的封装和API接口的管理
前端 api 请求缓存方案
示例代码
axios-learn
axios_node_api