美文网首页
Vue创建统一接口模式

Vue创建统一接口模式

作者: 动感光波波波 | 来源:发表于2019-11-03 20:02 被阅读0次

    方便拦截控制,并进行进一步的处理。
    由上自下的数据流

    需要用到的配置:

    Axios 、 vue@cli

    1. 首先创建Axios的实例对象,并未将来的值做好入参准备
    // @/utils/request.js文件下
    import axios from "axios"  //引入Axios
    
    export default function(data) {
         //在此处实例化axios,后续的自定义配置数据将以参数(data)的形式传递进来
        return axios({ 
            method: data.method || 'GET',  //设置默认值
            url: data.url,                 //这个必须自定义
            headers: {                     //header默认值
                'Content-Type': data.header || 'application/x-www-form-urlencoded',
            }
        })
    }
    
    1. 接口进行二次封装,以方便自定义化和模块化
    // @/api/index.js 文件下
    import request from "@/utils/request"  //引入封装好的axios
    
    export function getIndexData() {       
        return request({                       //这里要注意调用导入进来的request
            method: 'post',                    //在此处定义本接口的协议type
            url: "/api/v1/home/page",          //定义本接口的url
            headers: {                         
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        })
    }
    export function aaa() { ... }
    export function bbb() { ... }
    export function ccc() { ... }
    ....可以定义多个
    
    1. 使用
    // @/src/view/index/index.vue 文件下
    <script>
    import { getIndexData } from '@/api/index'     //注意这里的 {}
    
    export default {
          mounted(){
              //调用方法,此处遵循promise写法
               getIndexData().then(resolve=>{
                
               }).catch(reject=>{
                    
               })
          }
    }
    </script>
    

    拦截部分尚未完善,待我再次编辑

    相关文章

      网友评论

          本文标题:Vue创建统一接口模式

          本文链接:https://www.haomeiwen.com/subject/ewslbctx.html