Axios的基本使用

# 什么是 axios？

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

# 特性

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

# 安装

npm install axios

bower install axios

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

// Make sure to add code blocks to your code group

# 案例

执行GET请求

// 为给定 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(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

执行POST请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

1
2
3
4
5
6
7
8
9
10

执行多个并发请求

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) {
    // 两个请求现在都执行完成
}));

or

axios.all([
  axios.post(url),
  axios.get(url, params)
]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2)
}))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 拦截器

前往github查看axios封装管理，位于以下文件夹

https://github.com/wangwen112255/ElementUI-Features-Demo.git

拦截器

# 请求数据格式

1、请求数据格式为 application/x-www-form-urlencoded

axios设置：

headers: {
  "Content-Type": 'application/x-www-form-urlencoded'
},
transformRequest: [function (data) {
  let ret = '';
  for (let it in data) {
    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
  }
  return ret
}],

1
2
3
4
5
6
7
8
9
10

get请求：params传递参数
post请求: data传递参数（参数不会在URL上面显示）

在线编辑

#Axios

上次更新: 2022/10/10, 09:51:26

← Html 模块 (Module) 简介→