5、axios

Axios

Ajax要么就原生的JS写,要么就用Jquery的封装来写。要用封装,就必须要导入jquery.js。

Vue提倡:去Jquery化

Axios是新的与后端进行异步交互的方法,但是Axios不属于Vue,它是属于Vue的周边产品,使用时需要引入axios.js

npm i axios

Axios的官网

http://www.axios-js.com/zh-cn/docs/#axios-request-config-1

异步请求方式一:get方法

格式

axios.get("http://ip:port/project?key=value").then(function (response){
    //response.data获取响应回来的数据
    alert(response.data);
}).catch(function (e){
    //e为异常
    alert(e);
});

使用

new Vue({
    el:"div",
    data:{
        users:null,
    },
    created(){
        //此处的then()里面函数必须使用lambda表达式,不然无法获取this.users
        axios.get("http://172.16.2.67:8080/findAllUser.do?pageNum=1").then(response => {
            this.users = response.data.list;
        }).catch(function (e){
            alert(e);
        });
    }
})

异步请求方式二:post方法

格式

axios.post("http://ip:port/project","key=value").then(function (response){
    //response.data获取响应回来的数据
    alert(response.data);
}).catch(function (e){
    //e为异常
    alert(e);
});

使用

new Vue({
    el:"div",
    data:{
        users:null,
    },
    methods:{

    },
    created(){
        //此处的then()里面函数必须使用lambda表达式,不然无法获取this.users
        axios.post("http://172.16.2.67:8080/findAllUser.do","pageNum=1").then(response => {
            this.users = response.data.list;
        }).catch(function (e){
            alert(e);
        })
    }
})

异步请求方式三:并发请求

格式

method1(){
    return axios.get("http://ip:port/project?key=value");
},
method2(){
    return axios.get("http://ip:port/project?key=value");
}
axios.all([this.method1(),this.method2()]).then(axios.spread(function (response1,response2){
    alert(response1.data);
    alert(response2.data);
}))

使用

new Vue({
    el:"div",
    data:{
        users:null,
        byid:null,
    },
    methods:{
        findAll(){
            return axios.get("http://172.16.2.67:8080/findAllUser.do?pageNum=1");
        },
        findByid(){
            return axios.get("http://172.16.2.67:8080/findByUid.do?uid=1");
        }
    },
    created(){
        //此处的axios.spread()里面函数必须使用lambda表达式,不然无法获取this.users
        axios.all([this.findAll(),this.findByid()]).then(axios.spread((response1,response2) => {
            this.users = response1.data.list;
            this.byid = response2.data;
        }))
    }
})

文件上传

<div id="app">
    <input id="inputElement" name="file" type="file" accept="image/png, image/gif, image/jpeg"  />
    <button @click="upload">上传</button>
</div>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                file: null
            };
        },
        methods: {
            upload() {
                let inputElement = document.getElementById("inputElement");
                //获取input-file中的file对象,只上传一个文件,索引就是0
                let file = inputElement.files[0];
                // 创建一个form对象
                let param = new FormData(); 
                // 通过append向form对象添加数据
                param.append("file", file);
                // 添加form表单中其他字段数据
                param.append("key", "value");
                // FormData私有类对象,访问不到,可以通过get判断值是否传进去
                console.log(param.get("file")); 
                //配置多段请求,设置上传头
                let config = {
                    headers: { "Content-Type": "multipart/form-data" }
                };
                axios.post("http://192.168.31.253:8080/upload", param, config);
            }
        }
    });
</script>

Vuecli中使用axios

1、添加axios到项目中

cnpm install axios

2、在主配置文件main.js中引入axios

import axios from 'axios'

3、在Vue原型中挂载axios(全局都可以使用)

Vue.prototype.$axios = axios

4、在其他位置使用axios

this.$axios.post().then

封装Axios

日常业务中我们通常会对axios进行封装来使用,这么做的好处是:我们可以在每次请求前对请求做处理还可以对错误进行统一处理,从而避免每次发请求都要做重复的工作。比如:我们每次发送请求前都需要对请求的url做处理,就可以用到axios请求拦截;对后端返回的错误或网络错误通过响应拦截进行统一处理等等。

filter.js,用于对Axios的请求和响应进行拦截,并对Axios进行配置

import Axios from 'axios';

let baseURL = '';
if (process.env.NODE_ENV == 'development') {
    baseURL = '/';
} else if (process.env.NODE_ENV == 'production') {
    baseURL = '/';
}

let _axios = Axios.create({
    withCredentials: true, // 当前请求为跨域类型时是否在请求中协带cookie
    baseURL,
    timeout: 30000, // 设置超时时间
});


_axios.interceptors.request.use(
    config => {
        // 此处进行请求拦截

        return config;
    },
    err => {
        return Promise.reject(err);
    }
);

_axios.interceptors.response.use(
    resp => {
        // 此处进行响应拦截

        return resp
    }, 
    err => {
        if (err && err.response) {
            // 此处对err.response.status响应码进行判断

        }
        return Promise.resolve(err.response)
    }
);

export default _axios;

api.js,对各种请求方法进行封装

import axios from '@/api/filter.js';

// 封装get方法
export function get(url,params={}){
    return new Promise((resolve,reject) => {
        axios.get(url,{
            params:params
        }).then(response => {
            resolve(response.data);
        }).catch(err => {
            reject(err)
        })
    })
}

//封装get路径传参方法
export function getUrl(url,params={}){
    return new Promise((resolve,reject) => {
        axios.get(url+params).then(response => {
            resolve(response.data);
        }).catch(err => {
            reject(err)
        })
    })
}
// 封装post请求
export function post(url, params ,way=0) {
    return new Promise((resolve, reject) => {
        axios.post(url,params,{
            headers: {
                'Content-Type':way == 0 ? 'application/json;charset=UTF-8' : 'application/x-www-form-urlencoded;charset=UTF-8'
            }
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}

// 封装post请求文件下载
export function postDownLoad(url, params,type=1) {
    return new Promise((resolve, reject) => {
        axios.post(url,params,{responseType: type == 0?'blob':'arraybuffer'},{
            headers: {
                'Content-Type':'application/json;charset=UTF-8'
            }
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

// 封装post请求文件上传
export function postUpload(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url,params,{
            headers: {
                'Content-Type':'multipart/form-data;charset=utf-8'
            }
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}