前端——》记录一个自己封装的axios

2023-05-16

  1. js部分(request.js)
import axios from 'axios';
const service = axios.create({
    baseURL: 'http://localhost:8088/v1/',
    withCredentials:true,
    timeout: 50000,
});

service.interceptors.request.use(
    config => {
        config.headers = {
            'Authorization':'Bearer '+localStorage.getItem('access_token')
    };
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            if(response.data.code==401||response.data.code==403){
                console.log(response.data.msg);
                return Promise.reject(response.data.msg);
            }else{
                return response.data;
            }

        } else {
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

export default service;

  1. vue页面部分
/*先在页面引用*/
import request from '../../utils/request';
export default {
	data():{...},
	methods:{
	 	/*获取后台数据*/
        getData() {
            request({
                url: 'ownerCompany/list',
                method: 'post',
                params: {
                    page:this.query.pageIndex,
                    limit:this.query.pageSize,
                    companyName: this.query.name,
                    companyCode: this.query.code,
                }
            }).then(res => {
                this.tableData = res.data;
                this.pageTotal = res.count || 0;
            });
        },
        
        /*弹窗编辑请求:增加或修改数据*/
        updateData(){
        	request({
                url: this.form.id==null?'ownerCompany/add':'ownerCompany/update',
                method: 'post',
                params: this.form
            }).then(res => {
                if(res.code==200){
                    this.editVisible = false;
                    this.$message.success(this.form.id==null?'添加成功':'修改成功');
                    this.$set(this.tableData, this.idx, this.form);
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            });
		}
 	}
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端——》记录一个自己封装的axios 的相关文章

随机推荐