axios使用心得

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

使用

安装

使用 npm:

1
$ npm install axios

使用 cdn:

1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在vue项目中使用axios

  1. 挂载在vue的原型上 全局使用

    首先在主入口文件main.js中引用,之后挂在vue的原型链上

    1
    2
    import axios from 'axios'
    Vue.prototype.$axios = axios

    在vue组件中使用:

    1
    2
    3
    4
    5
    this.$axios.get('/api/getList').then((res) => {
    this.newList = res.data.data
    }).catch(err => {
    console.log(err)
    })
  2. 结合 vue-axios使用

    在main.js中引用

    1
    2
    3
    4
    import axios from 'axios'
    import VueAxios from 'vue-axios'

    Vue.use(VueAxios,axios);

axios API

axios.get(url[, config])

axios.delete(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

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
this.axios.get('/api/demo', {
params: {
id: 124,
name: 'jerry'
}
})
其实一般axios添加参数是
this.axios.get('/api/demo?id=124&&name='jerry)

this.axios.delete('/api/demo', {
data: {
id: 123,
name: 'Henry',
sex: 1,
phone: 13333333
}

this.axios.post('/api/demo', {
name: 'jack',
sex: 'man'
})

this.axios.put('/api/demo', {
name: 'jack',
sex: 'man'
})

在使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。

因为params是添加到url的请求字符串中的,用于get请求。 参数是以id=124&name=jerry的形式附到url的后面

而data是添加到请求体(body)中的, 用于post请求。

POST请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。

执行多个并发请求

1
2
3
4
5
6
7
8
9
10
11
12
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(config)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
//等同于以下写法
axios.post('/user/12345', {
firstName: 'Fred',
lastName: 'Flintstone'
})

// 获取远端图片
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
}).then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

简单的请求配置(config)

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
{
// `url` 是用于请求的服务器 URL
url: '/user',

// `method` 是创建请求时使用的方法
method: 'get', // default

// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',

// `headers` 是即将被发送的自定义请求头
headers: { Authorization: token }

// `params` 是即将与请求一起发送的 URL 参数 用于get请求
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},

// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
data: {
firstName: 'Fred'
},

// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间,请求将被中断
timeout: 1000,

}

响应结构

某个请求的响应包含以下信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
// `data` 由服务器提供的响应
data: {},

// `status` 来自服务器响应的 HTTP 状态码
status: 200,

// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',

// `headers` 服务器响应的头
headers: {},

// `config` 是为请求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}

接收响应

1
2
3
4
5
6
7
8
9
axios支持Promise对象,所以获取响应值 用then
axios.get('/user/12345')
.then(function(res) {
console.log(rese.data);
console.log(res.status);
console.log(res.statusText);
console.log(res.headers);
console.log(res.config);
});

可以用catch做错误处理

全局配置axios默认值

1
2
3
4
5
axios.defaults.baseURL = "https://api.example.com";
axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
axios.defaults.headers.common['Authorization'] = ''; // 设置请求头为 Authorization
axios.defaults.timeout = 200; 在超时前,所有请求都会等待 2.5 秒

错误处理

1
2
3
4
5
6
7
8
9
10
11
12
13
axios.get("/user/12345")
.catch(function (error) {
if (error.response) {
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else {
// Something happened in setting up the request that triggered an Error
console.log("Error", error.message);
}
console.log(error.config);
});

可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

1
2
3
4
5
axios.get("/user/12345", {
validateStatus: function (status) {
return status < 500; // 状态码在大于或等于500时才会 reject
}
})

拦截器

可以自定义拦截器,在在请求或响应被 thencatch 处理前拦截它们。

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);
});
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
//配置发送请求前的拦截器 可以设置token信息 
axios.interceptors.request.use(config => {
//loading开始 //加载进度条
loadingInstance.start();
let token = localStorage.getItem("x-auth-token"); // 给所有请求带上token
if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.token = `${token}`;
}
return config;
}, error => {
//出错,也要loading结束
loadingInstance.close();
return Promise.reject(error);
});


// 配置响应拦截器
axios.interceptors.response.use(res => {
//loading结束
loadingInstance.close();
//这里面写所需要的代码
if (res.data.code == '401') {
//全局登陆过滤,当判读token失效或者没有登录时 返回登陆页面
return false;
};
return Promise.resolve(res);
}, error => {
loadingInstance.close();
return Promise.reject(error);
})

注意事项

axios会默认序列化 JavaScript 对象为 JSON

axios中POST的默认请求体类型为Content-Type:application/json(JSON规范流行)这也是最常见的请求体类型,也就是说使用的是序列化后的json格式字符串来传递参数,如:{ "name" : "mike", "sex" : "male" };同时,后台必须要以支持@RequestBody的形式接收参数,否则会出现前台传参正确,后台接收不到的情况。
如果想要设置类型为Content-Type:application/x-www-form-urlencoded(浏览器原生支持),axios提供了两种方式,如下:

  1. URLSearchParams

    1
    2
    3
    4
    const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/user', params);
  2. qs

    默认情况下在安装完axios后就可以使用qs库 选择使用qs库编码数据:

    1
    2
    const qs = require('qs');0
    axios.post('/foo', qs.stringify({ 'bar': 123 }));

官方文档

-------------本文结束 感谢您的阅读-------------