11 13vue代码优化

标签：11 axios 13vue instance 代码优化 result msg ElMessage data

今天基本学完了前端vue，整理vue：接口封装

//定制请求的实例
//导入axios  npm install axios import axios from 'axios';
import { ElMessage } from 'element-plus' //定义一个变量,记录公共的前缀  ,  baseURL //const baseURL = 'http://localhost:8080'; const baseURL = '/api'; const instance = axios.create({ baseURL }) import router from '@/router' //添加响应拦截器 instance.interceptors.response.use(     result => {         //判断业务状态码         if(result.data.code===0){             return result.data;         }
        //操作失败         //alert(result.data.msg?result.data.msg:'服务异常')         ElMessage.error(result.data.msg?result.data.msg:'服务异常')         //异步操作的状态转换为失败         return Promise.reject(result.data)             },     err => {         //判断响应状态码,如果为401,则证明未登录,提示请登录,并跳转到登录页面         if(err.response.status===401){             ElMessage.error('请先登录')             router.push('/login')         }else{             ElMessage.error('服务异常')         }                 return Promise.reject(err);//异步的状态转化成失败的状态     } )
export default instance;     这里封装了响应拦截器 instance的定义免除了网络号和端口号的重复书写 result =>替代了.then()  err => 替代了.catch() 以前所有封装在api中的重复的相应成功和失败的操作都不用在写了。        

标签：11,axios,13vue,instance,代码优化,result,msg,ElMessage,data
From： https://www.cnblogs.com/fengjiale/p/17828473.html