Vue封裝API，詳細解釋。【附帶源碼】

1、爲什麼我們要封裝API

ps: 如果已經有了明確要封裝API的需求，直接看第二步。

在沒有封裝API之前，我們是類似這樣使用 axios 的

this.$axios.post('blogArticle/frontList',parms)
.then((resp) => {
      this.blogList = resp.data,
      this.blogTotal = resp.total * 1
})

封裝之後這樣調用

userlist(parms).then(resp => {        
      this.blogList = resp.data,
      this.blogTotal = resp.total * 1
})

我們先不看具體是怎麼封裝的，但看使用，發現好像寫的代碼一樣多呢。（等你瞭解了封裝之後，可能覺得封裝寫的代碼更多一些）

我最開始就是有這樣的疑惑，所有我一直沒有使用API的封裝，因爲我確實找不到使用它的理由。

下面我們來看這個問題：假如上面這個API你在100個頁面都使用到了，而這時候後端因爲某種原因需要你改一下地址從 blogArticle/frontList 改成 blogArticle/list呢？

• 那你是不是要改一百次？
• 改一百次還是時間問題，問題是你知道這一百個頁面都在那裏嘛？你根本找不到

爲了解決上面的問題，和使得代碼更加的規範，我們可以把API進行封裝。

2、如何封裝API

2-1：配置axios過濾器 request.js

• 你需要修改成 你的請求地址前綴 axios.defaults.baseURL
• 我這裏使用了ElementUI的Message，如果沒有，你可以去掉。

request.js

/**
 * ajax請求配置
 */
import axios from 'axios'
import { Message } from 'element-ui'

// axios默認配置
axios.defaults.timeout = 10000 // 超時時間
// axios.defaults.baseURL 請求地址前綴
// User地址
// axios.defaults.baseURL = 'http://127.0.0.1:8001'
// tools地址
// axios.defaults.baseURL = 'http://127.0.0.1:8088'
// 微服務地址
axios.defaults.baseURL = 'http://myzuul.com:9527/xdx'

// 整理數據
axios.defaults.transformRequest = function(data) {
    data = JSON.stringify(data)
    return data
}

// 路由請求攔截
axios.interceptors.request.use(
    config => {
        config.headers['Content-Type'] = 'application/json;charset=UTF-8'

        return config
    },
    error => {
        return Promise.reject(error.response)
    })

// 路由響應攔截
axios.interceptors.response.use(
    response => {
        if (response.data.success === false) {
            return Message.error(response.data.errDesc)
        } else {
            return response.data
        }
    },
    error => {
        return Promise.reject(error.response) // 返回接口返回的錯誤信息
    })
export default axios

2-2：創建API authority.js

• 這裏我寫兩個演示，一個是get請求，一個是post請求。傳遞的到後臺都是json格式的。

authority.js

// 權限管理API  【菜單、角色、權限】
import request from '@/utils/request'

/**
 * 添加菜單
 * @param {*} data
 * @author 小道仙
 * @date 2020年2月19日
 */
export function addMenu(data) {
    return request({
        url: '/myuser/authority/menu/add',
        method: 'post',
        data
    })
}

/**
 * 菜單列表
 * @param {*} query
 * @author 小道仙
 * @date 2020年2月19日
 */
export function menuList(query) {
    return request({
        url: '/myuser/authority/menu/list',
        method: 'get',
        params: query
    })
}

2-3：具體使用

1、在我們需要使用API的頁面，引入

2、使用

addMenu() {
     addMenu(this.menuData).then(resp => {
           this.drawer = false
           this.$message.success(resp.msg)
           this.getList()
           this.handleClose()
      })
},

getList() {
     const param = {
          flag: 1
     }
     menuList(param).then(resp => {
          this.tableData = resp.data
     })
}

3、其它

3-1：這是我的一個開源項目，你可以參看源碼

https://github.com/xdxTao/xdx-framework-vue

3-2：如果對你有幫助，可以關注我的微信公衆號一起成長哦。