Vue中axios的使用

axios的原理

axios的基于promise，可以用在浏览器和node.js的HTTP客户端，主要用于请求数据。同时可以避免代码请求数据套了好多层，不利于维护和管理。
1、axios基于promise的封装

let axios = {
   get(url) {//接收路径数据
        let pro = new Promise(function (resolve, reject) {
            $.get(url, data => {
                resolve(data)//数据处理成功是返回的函数，reject是出现错误是返回的函数
            })
        })
        return pro 
    }
}

axios的使用。通过get对象获取数据，然后通过then（）处理数据然后返回处理好的数据数据，对于处理好的数据可以继续使用then（）函数在后面一直调用下去。

 axios.get('./subject.json').then(function (res) {
            console.log(res);
        })

2、axios的使用
axios的封装，可以通过调用在线链接或者本地的链接直接使用
引入在线链接：

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

<script>
    new Vue({
        el: '#app',
        async mounted() {//前面加async表示是异步操作
            let res = await axios.get('./subject.json') //变量res接收数据。关键字await表示等待，等执行完含有此关键字的语句才可以继续往下执行
            this.list = res.data
            console.log(this.list);
        },
        data() {
            return {
                list: []
            }
        },
    })
</script>

3、请求拦截器和响应拦截器（可以在两个拦截器中对数据进行调用可以检查数据是否获取成功）

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    let {method,url,params,data}=config
    if(method==='get') console.log(`${method}了${url},参数${Qs.stringify(params)}`);
    else  console.log(`${method}了${url},参数${Qs.stringify(data)}`);
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

4、超时和基础URL头设置
有时候网页由于网络或者其他原因加载时间过长，用户等待时间长用户体验感不好。所以使用超过一定时间没有加载完成就提示用户。

axios.defaults.timeout = 2500 //当2500毫秒过后没有返回结果则直接返回失败的结果。

基本URL头是为了避免外部可以通过连接对数据进行修改，所以加一个基本URL，在代码中就不需要再写基本URL，加强了代码的安全性。

 axios.defaults.baseURL='http://simbajs.com:89/'

可以单独设置，也可以通过对象进行设置

 axios=axios.create({
    timeout:2500,
    baseURL:'http://simbajs.com:89/'
})