axios使用快速参考

发表于 | 阅读次数

Axios 是一个基于Promise的HTTP库

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

1.请求demo

执行 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(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);
  });

执行多个并发请求

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

2.拦截器

与其他请求扩展不一样的是，它支持拦截请求和响应，也就是在请求前后加多一个中间件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 添加请求拦截器
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);
  });
// 移除拦截器
axios.interceptors.request.eject(myInterceptor);

3.支持 promise API

也就是说，axios返回的是一个promise对象，能够用Promise链式调用的方法来做回调函数，也可以使用async/await来把异步变成“同步写法”。

比如

1
2
3
4
5
6
7
8
9
10
11
12
13
var axios = require('axios');
function test() {
  return axios('www.jd.com').then((res)=> {
      return res;
  }).catch( (error) => {
    return error;
  })
}
(async function () {
  var testData = await test();
  console.log(testData);
})();