这几天临近过年,实习的公司也从25号开始放假了,好好休整了几天,摸鱼做做毕业设计,也还有几天就要过年了,但时间紧迫,毕业,工作的各种事情也都将棘手起来,所以还是不能闲太久呢,要有所紧迫感…

今天零星总结一下之前笔记中的Axios的使用方法:


get
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

// 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
post
1
2
3
4
5
6
7
8
9
10
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Axios API
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//可使用下列配置方法请求axios(config)
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}});

axios(url[, config])

axios('/user/12345');


以及几种其他的请求别名:

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
多个Axios的执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
axios.all(iterable)
axios.spread(callback)

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请求的配置项
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
{
url: 'url' // 请求的url
method: 'get' // 请求的方法
baseURL: 'url' // 将baserURL加在url前边,便于axios传递为相对URL
transformRequest: [function (data) {
return data
}] //允许向服务器发送数据前,修改请求的数据,只限于 'PUT','POST','PATCH'请求方法
transformRequest: [function (data) {
return data
}] //允许向服务器响应数据后,数据传递给then/catch前,修改响应数据
headers: {''X-Requested-With': 'XMLHttpRequest''} //自定义请求头
params: {
ID: 12345
} // 将发送的URL参数
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
} // 负责序列化 params,为什么?->看解决问题1、,所以需要序列化
data: {
firstName: 'Fred' // 作为请求主体发送的数据
}
timeout: 1000 // 指定请求超时的时间数,超时将中断
withCredentials: false //跨域时是否需要凭证

以及其余众多方法...

}
params与data
1
2
3
4
paramsdata的区别?:

params是添加到url的请求字符串的,用于get请求
data是添加到body中的,用于post请求
Axios请求的结构
1
2
3
4
5
6
7
8
9
10
11
12
13
response->:响应结构
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}
axios.create创建实例
1
2
3
4
// 自定义创造一个axios的实例,这样亦可以与默认的axios区分开来
var instance = axios.create({
baseURL: 'https://api.example.com'
});
axios拦截器

可统一在请求发送时或者接收时做网络的统一处理,例如响应的404等错误处理,而不用交由每一个请求响应来做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});