Vue中API封裝

實現功能

接口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

login.js ---- 登錄模塊相關接口，其他模塊同理，便於管理

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)
	  }
    })
  }
}