江民钦的博客

show me code

Axios(JS HTTP库/Ajax库)基本用法

特征

vue更新到2.0之后，作者就不再对vue-resource更新了，而是推荐使用Axios。Axios的特征是：

  • 在浏览器中发送 XMLHttpRequests 请求
  • 比Jquery轻量，但处理请求不多时，可以使用
  • 基于Promise语法标准
  • 支持NodeJs
  • 拦截请求和响应
  • 自动转换JSON数据
  • 客户端支持保护安全免受 XSRF 攻击

    安装(没有安装npm的可以直接安装nodejs，自带npm)

安装到当前项目下：
1
npm install --save axios vue-axios
或全局安装：
1
npm install -g axios vue-axios

使用

1
2
3
4
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)

例子

发送get请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });
  //上下代码等同
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });
发送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 (response) {
    console.log(response);
  });
发送多个并发请求
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) {
    // Both requests are now complete
  }));
可以通过给axios传递参数来制定请求
1
2
3
4
5
6
7
8
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
在Vue中使用
1
2
3
4
5
6
7
8
9
Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
this.axios.get(api).then((response) => {
  console.log(response.data)
})
this.$http.get(api).then((response) => {
  console.log(response.data)
})

设置axios全局默认值

您可以指定将应用于每个请求的配置默认值。

1
2
3
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';

拦截器

你可以截取请求或响应在被 then 或者 catch 处理之前

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);
   }); 
/*如果你以后可能需要删除拦截器。*/
var myInterceptor = axios.interceptors.request.use(function(){/*...*/});
axios.interceptors.request.eject(myInterceptor);

取消请求

您可以使用取消令牌取消请求。
您可以使用CancelToken.source工厂创建一个取消令牌，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown){
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    /* 处理错误*/
  }
});
/*取消请求(消息参数是可选的)*/
source.cancel('操作被用户取消。');

您还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌：

1
2
3
4
5
6
7
8
9
10
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/ user / 12345'，{
   cancelToken：new CancelToken(functionexecutor(c){
     /*一个执行器函数接收一个取消函数作为参数*/
     cancel = c;
   })
});
/* 取消请求*/
clear();

注意：您可以使用相同的取消令牌取消几个请求。

axios在很大程度上受到Angular提供的$http服务的启发。 最终，axios努力提供一个在Angular外使用的独立的$http-like服务。

axiosvue