axios的配置和使用

发表于 | 分类于 ， |

这几天大佬让我把项目的ajax全部换成axois，接到任务时，我内心深处第一反应是两个字**,因为由于历史问题…..。
哎，程序员怎么能说不能，干吧。
之前只是了解过，但是也没实际用过，趁着这次也用用。在网上找了找，发现并不复杂。来吧，照着官网来。

  1. 安装

    npm install axios

  2. 引用

    import axios from ‘axios’

  3. 挂载在vue原型上

    Vue.proptotype.$axios=axois;

  4. 调用
    1
    2
    3
    4
    5
    this.$axios.get('xxxxx')
    .then(res=>{
        //TODO
    })
    .catch(err=>console.log(err));

到目前，我们的axios已经可以成功运行了，尝试发了一个请求，已经能接受到请求了。
接下来就是 做一些利国利民的事情了。

  1. 设置基本路径

    axios.defaults.baseURL=’http://sanfield.github.io'

  2. 设置拦截器
  • 请求发起之前 
1
2
3
4
5
6
7
8
9
10
11
// 定义拦截器
// 1: 请求发起前显示loading open();
Axios.interceptors.request.use(function(config) {
    // 不变配置:  可变，可以设置公共的请求头操作
    MintUI.Indicator.open({
      text: '玩儿命加载中...',
      spinnerType: 'fading-circle'
    });
    // console.log(config);
    return config;  // config:{ headers}
})
  • 接收到相应后
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 2: 响应回来后关闭loading close()
    Axios.interceptors.response.use(function(response) {
        //reponse: { config:{ },data:{} ,headers }

        // 接收响应头或者响应体中的数据，保存起来，供请求的拦截器中使用头信息操作
        MintUI.Indicator.close();
        // console.log(response);
        return response;
    })

经过上面一系列操作，我们的axios已经可以进行生产使用了，好了我要挨个解决历史问题了。

分享