axios的使用教程

axios中文文档
axios发送GET、POST请求
axios拦截器的使用

安装

npm i axios -S

用axios代替ajax

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios中文文档

配置默认值

  • 配置后端host
    1
    axios.defaults.baseURL = 'https://api.example.com';

这样,url就不需要写成https://api.example.com/user,只需要写成/user即可

  • 配置withCredentials
    1
    axios.defaults.withCredentials = true;

表示跨域请求时带上凭证

  • 配置POST请求格式
    1
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

基础用法

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
// 发送 GET 请求
axios({
method: 'get',
url: '/user',
params: { //只有GET是用params发送参数,会显示在地址栏
ID: 12345,
}
})
.then(res => {
console.log(res);
})
.catch(error => {
console.log(error);
});
;
// 发送 POST 请求【params用于GET时发送参数,会显示在地址栏;除此以外的用data发送参数,显示在开发者工具的Form Data里】
axios({
method: 'post',
url: '/user',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
;

执行GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});

带查询参数的GET请求

1
2
3
4
5
6
7
8
9
10
11
axios.get('/user', {
params: {
ID: 12345
}
})
.then(res => {
console.log(res);
})
.catch(error => {
console.log(error);
});

执行POST请求

GET请求可以直接/user?ID=12345,数据会显示在地址栏;POST请求为了安全,不能直接在url后面接数据

在axios中的post请求要非常注意两个地方:

  1. 要设置合适的请求头,一般采用x-www-form-urlencoded即可
  2. 发送的数据要用qs序列化,因为axios默认的格式是Request Payload(打开控制台的Network -> Headers)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import axios from 'axios';
import qs from 'qs';
axios.post('/user',
qs.stringify({
firstName: 'Fred',
lastName: 'Flintstone'
}),
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}
).then(({data}) => {
console.log(data);
})
.catch(error => {
console.log(error);
});

此时,打开Network -> Headers,可以看到数据在Form Data中了。

拦截响应,返回自定义假数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
let {config:{url,method,data}} = response;
//↑ 分解成let url = response.config.url;
if (url === '/book/1' && method === 'get') {
response.data = {
name: stage,
}
} else if (url === '/books/1' && method === 'put') {
data = JSON.parse(data)
Object.assign(book, data)
response.data = book
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

更多axios配置

axios(config)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
axios({
baseURL: 'https://some-domain.com/api',
url: '/user',
method: 'get', // 默认是 get
// params 只有GET时能用,参数会显示在地址栏
params: {
ID: 12345
},
// GET以外的方法,用data传送参数,会显示在开发者工具的Form Data里
data: {
firstName: 'Fred'
},
headers: {
Content-Type:'application/x-www-form-urlencoded; charset=UTF-8'
},
//跨域时,把cookie传给第三方服务器
withCredentials: true
})

将axios添加到vue的prototype上

1
2
3
4
5
import axios from 'axios';
Vue.prototype.$axios = axios;
//然后就可以通过this.$axios来使用axios
//这样就不需要每个文件内都import axios了

jsonp跨域

axios-jsonp-pro

官网:https://github.com/RekingZhang/axios-jsonp

npm i axios-jsonp-pro

使用

与axios一样的api,并且多了jsonp功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// jsonp跨域请求
axios.jsonp('/user?ID=12345')
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
// 也可以写成这种形式
axios.jsonp('/user', {
timeout: 1000,
params: {
ID: 12345
}
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});

【点击查看代码】

vue-jsonp

npm i vue-jsonp

使用

this.$jsonp(url, dataObj, timeout)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
// Use it in Vue Component.
methods: {
getData() {
this.$jsonp('https://api.douban.com/data',{ name: 'stage', age: 24 })
.then(res => {
// Success.
})
.catch(err => {
// Failed.
})
}
}
-------------本文结束感谢您的阅读-------------