vue-axios学习笔记

what is axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios的功能特性

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

axios的使用代码(带注释)

 //axios.all方法接受一个数组作为参数，数组中的每个元素都是一个请求，返回一个promise对象，当数组中所有请求均已完成时，执行then方法。
 //在then方法中执行了 axios.spread 方法。该方法是接收一个函数作为参数，返回一个新的函数。接收的参数函数的参数是axios.all方法中每个请求返回的响应。
 // 需要注意的一点是post请求时，除了jquery，axios和原生ajax需要设置头部参数! 
 //this.$axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  Vue.prototype.$axios = axios;
        var App = {
            data: function() {
                return {
                    res1: '',
                    isshow: false

                }
            },
            template: `
            <div>
              <button @click="sendajax">点击发送请求</button>
              {{res1}}
              <div class="loading"  v-show=isshow>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
               </div>
            </div>
            `,
            methods: {
                sendajax: function() {
                    var that = this;

                    this.$axios.interceptors.request.use(function(config) {
                        that.isshow = true;
                        console.log(config);
                        return config;

                    });
                    this.$axios.interceptors.response.use(function(res) {
                        that.isshow = false;
                        console.log(res);
                        return res;
                    });
                    this.$axios.defaults.baseURL = 'https://www.easy-mock.com/mock/5dc0066643ff8e61fd932a22/example'
                    let q1 = this.$axios.get('/data', {
                        params: {
                            id: 1
                        },

                        //该方法可以在then之前更改返回的数据！参数就是服务器返回的数据！
                        transformResponse: function(data) {
                            data = '我是改变后的数据';
                            return data;
                        }
                    });
                    let q2 = this.$axios.post('/upload', {
                        //该方法可以在请求数据之前对请求体进行修改！
                        transformRequest: function(data) {
                            return 'name=renge';
                        },
                        data: {
                            age: 18
                        }
                    });
                    //该方法同时对两个请求结果进行处理，q1和q2为响应状态！
                    this.$axios.all([q1, q2]).then(this.$axios.spread((res1, res2) => {

                        }))
                        .catch(err => {
                            console.log(err)
                        })
                }
            }

        }
        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template: `
            <app/>
            `
        })