11 13vue代码优化

今天基本学完了前端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中的重复的相应成功和失败的操作都不用在写了。

 

 

 

 

 这是最后对相应拦截器的优化