為什麼要做介面適配

同一個功能，後端返回的資料結構經常變動，導致前端寫的邏輯也得相應的修改，而介面適配就是為了解決此問題，不管後端介面怎麼變動，前端只需要調整適配的資料部分，而不會對頁面已有邏輯造成影響。

請求介面的適配

拿登入功能來說，有賬號密碼欄位。

請求登入（以前）

export const Login = data => {
    return ajax.post('/sso/login', {
        username: data.username,
        password: data.password
    })
}

或

export const Login = data => {
    return ajax.post('/sso/login', data)
}
 

請求登入（現在）

export const Login = data => {
    return ajax.post('/sso/login', {
        username: data.name,
        password: data.password
    })
}

以前的寫法和現在的寫法，它們的差別在於以前獲取的頁面資料欄位都是按照後端要求的資料結構寫的，而現在的做法只是在請求登入時，對傳遞的資料進行調整。

這樣做的好處在於頁面中的邏輯，資料結構可以根據自己來定義，而不會限制於後端的資料結構，另外也就不必等後端介面實現好了再寫相關邏輯，因為所有的資料結構都是自己來定義的。

響應資料的適配

還是拿登入功能來說

現在

export const Login = data => {
    return ajax.post('/sso/login', {
        userName: data.name,
        password: data.password
    }).then(res => {
        let data = res.data
        
        return {
            token: data.token,
            name: data.userName,
            sex: data.userSex,
            mobile: data.userMobile
        }
    })
}
 

頁面中

<template>
  <div>姓名：{{user.name}}</div>
  <div>性別：{{user.sex}}</div>
</template>

<script>
    import { Login } from '$api'
    
    export default {
        data() {
            return {
                name: '',
                sex: ''
            }
        },
        created() {
            Login({
                name: '張三',
                password: '123456'
            }).then(res => {
                this.name = res.name
                this.sex = res.sex
            })
        }
    }
</script>

以前

export const Login = data => {
    return ajax.post('/sso/login', {
        userName: data.userName,
        password: data.password
    })
}

頁面中

<template>
  <div>姓名：{{user.userName}}</div>
  <div>性別：{{user.userSex}}</div>
</template>

<script>
    import { Login } from '$api'
    
    export default {
        data() {
            return {
                userName: '',
                userSex: ''
            }
        },
        created() {
            Login({
                userName: '張三',
                password: '123456'
            }).then(res => {
                this.userName = res.userName
                this.userSex = res.userSex
            })
        }
    }
</script>

可以看到以前我們總是按後端返回的資料結構，原樣的寫在頁面裡面，然而一旦後端資料結構發生了變更，我們就要找到所有使用此介面的頁面，並調整相應引數。

現在的做法雖然看似程式碼變多了，但你會發現，頁面中的資料結構是按照我們自己寫的，所以後端的資料結構怎麼改變，都不怎麼需要改動頁面中的引數和邏輯。

結語

儘管介面適配可以避免重新調整頁面既有邏輯，但不管如何還是需要後端提前提供介面文件的，因為最終的資料是由後端來提供的，如果期望的介面並沒有返回指定資料，而這些資料需要另一個介面來獲取，從而導致頁面中的邏輯與現有資料不一致。

也就是說，儘管我們可以對介面進行適配，但還是有必要提前瞭解一下後端返回的資料和所需的資料。