1. 首页
  2. VUE

封装axios和在vue项目中使用

安装axios之后不能直接用Vue.use(axios);因为 axios 没有 install
所以我们要添加到原型里面

axios封装:

Vue.prototype.axios = axios;//添加到原型
Vue.prototype.api = "https://www.aijiumai.cn";//接口地址
//注意加载这些是element框架的,使用的时候请修改
Vue.prototype.$axios = function (arr) {
    var _this = this;
    var axios = _this.axios;
    var api = this.api;
    /* 显示加载 */
    const loading = _this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    /* 显示加载 */

    axios({
        method: arr.method || "POST",
        baseURL: arr.api || api + arr.url,
        timeout: arr.timeout || 10000,//限制了请求时间,超过了就会停止
        data: arr.data,
        header: arr.header || {
            'content-type': 'application/json'
        },
    }).then(res => {
        loading.close();//关闭加载
        // 成功
        if ((res.data.code - 0) === 200) {
            arr.success && arr.success(res);
            return false;
        }
        // 失败
        if ((res.data.code - 0) != 500 && (res.data.code - 0) != 200) {
            _this.$message({
                message: res.data.msg || '操作失败,请查看控制台',
                type: 'warning'
            });
            arr.fali && arr.fali(res);
            return false;
        }
        // 权限不足
        if ((res.data.code - 0) === 500) {
            // _this.$message.error('登入失效,请重新登入');
            window.setTimeout(() => { _this.$router.replace('/login'), 1000 });
            return false;
        }
    }).catch(err => {
        // 失败
        loading.close();//关闭加载
        if(err.message.includes("timeout")){
            _this.$message({
                message:'网络超时,请稍后再试。',
                type: 'warning'
            });
        }
        arr.catch && arr.catch(err);
    })
};

axios使用:

this.$axios({
    url: "index.php",
    data:data,
    success: res => {
        // 成功
        console.log(res);
    },
    fali: res => {
        // 失败
        console.log(res);
    },
    catch:res =>{
        // 错误
        console.log(res);
    }
});

本文来自挚友阳光,本站一部分文章不代表本站立场,不妥请联系本站删除,如若转载,请注明出处:https://www.linstudy.com/article/85.html