為什麽要做接口適配

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

請求接口的適配

拿登錄功能來說，有賬號密碼字段。

請求登錄（以前）

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>

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

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

結語

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

也就是說，盡管我們可以對接口進行適配，但還是有必要提前了解一下後端返回的數據和所需的數據。

對後端返回的數據進行適配