Vue中API封装

阳光穿透心脏的1/2处 2023-02-20 13:38 24阅读 0赞

## 实现功能 ##

接口api化  
请求自动绑定  
防止重复提交

## API封装 ##

**1、src目录下新建api文件夹**  
index.js ---- 接口总路由

// 接口总路由
    import myserver from '../request/getRequest.js'
    import login from './login.js'
    import shop from './shop.js'
    myserver.parseRouter("login", login)
    myserver.parseRouter("shop", shop)
    export default myserver

export default { 
        loginIn: "/api/loginIn",
        loginOut: "/api/loginOut"
    }

**2、src目录下新建request文件夹**  
server.js ---- 接口请求初始化配置

// axios的初始配置
    import axios from 'axios'
    const server = axios.create({ 
        baseURL: 'http://localhost:3000',
        timeout: 5000,
        headers: { 
            'content-type': 'application/x-www-form-urlencoded'
        }
    })
    //请求拦截器
    server.interceptors.request.use(config => {  //拦截请求，做统一处理
        const token = "asdasdk"
        //在每个http header都加上token
        config.headers.authorization = token
        return config
    }, err => { //失败
        return Promise.reject(err)
    })
    //响应拦截器
    server.interceptors.response.use(response => {  //拦截响应，做统一处理
        if (response.data.code) { 
            switch (response.data.code) { 
                case 200:
                    console.log("1111")
            }
        }
        return response
    }, err => {  //无响应时的处理
        return Promise.reject(err.response.status)
    })
    export default server;

getRequest.js ---- 接口请求二次封装

// 二次封装
    import server from './server.js'
    import qs from 'qs'
    function myserver () { 
        this.server = server
        // 当前处理哪个组件
        this.nowHandle = null
    }
    myserver.prototype.v = function (ob) { 
        this.nowHandle = ob
        return this
    }
    myserver.prototype.parseRouter = function (name, urlOb) { 
        // 注册模块
        var ob = this[name] = { }
        // 循环绑定模块下的路由地址
        Object.keys(urlOb).forEach((item) => { 
            ob[item] = this.senMes.bind(this, name, item, urlOb[item])
            //当前请求是否可提交
            ob[item].state = 'ready'
        })
    }
    myserver.prototype.senMes = function (moduleName, name, url, config) { 
        // 默认配置,config为自定义配置
        var config = config || { }
        var type = config.type || 'get'
        var data = config.data || { }
        var self = this
        // 请求发送时
        var before = function (mes) { 
            // 特异处理，例如请求加遮罩，告诉后端请求了当前接口
            return mes;
        }
        // 请求成功处理
        var defaultFn = function (res) { 
            // 请求成功之后，当前接口状态重置为可提交状态
            self[moduleName][name].state = 'ready'
            //请求自动绑定
            self.nowHandle[name] = res.data
            return res
        }
        var success = config.success || defaultFn
        var successCallback = function (res) { 
            success(res, defaultFn)
        }
        // 请求异常处理
        var defaultError = function (err) { 
            // 异常处理
            alert(err)
        }
        var error = config.error || defaultError
        var errorCallback = function (res) { 
            error(res, defaultError)
        }
        // 策略模式请求接口
        var state = { 
            get: function () { 
                var urlqs = url + "?" + qs.stringify(data)
                server.get(urlqs).then(before).then(successCallback).catch(errorCallback)
            },
            post: function () { 
                server.post(url, data).then(before).then(successCallback).catch(errorCallback)
            }
        }
        // 防止重复提交
        if (self[moduleName][name].state == 'ready') { 
            self[moduleName][name].state = 'pending'
            state[type]() 
        }
    }
    export default new myserver;

**3、main.js中引入，进行全局化配置**

import qa from './api'
    Vue.prototype.qa = qa

**4、页面内使用**

export default { 
      name: 'HelloWorld',
      data () { 
        return { 
          loginIn: ''
        }
      },
      mounted () { 
      	// this指向到当前组件，只需调用一次即可
        this.qa.v(this)
        this.qa.login.loginIn()
        // 自定义配置
        this.qa.login.loginIn({ 
          type: 'get',// 请求类型，默认为get
          data: {  // 请求数据，默认为{}
            name: 'bbb'
          },
          success: function(res){  // 请求成功处理，不传会进行请求自动绑定，将返回的数据绑定到data中的loginIn中
            console.log(res)
          },
          error: function(err){  // 请求失败处理
    	  	console.log(err)
    	  }
        })
      }
    }