flura的博客
0%

axios使用心得

Posted on In Views: Valine:

特性

  • 从浏览器中创建 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
  }
})

拦截器

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

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 }));

官方文档