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

爲何要作接口適配

同一個功能，後端返回的數據結構常常變更，致使前端寫的邏輯也得相應的修改，而接口適配就是爲了解決此問題，無論後端接口怎麼變更，前端只須要調整適配的數據部分，而不會對頁面已有邏輯形成影響。

請求接口的適配

拿登陸功能來講，有帳號密碼字段。

請求登陸（之前）

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>

能夠看到之前咱們老是按後端返回的數據結構，原樣的寫在頁面裏面，然而一旦後端數據結構發生了變動，咱們就要找到全部使用此接口的頁面，並調整相應參數。

如今的作法雖然看似代碼變多了，但你會發現，頁面中的數據結構是按照咱們本身寫的，因此後端的數據結構怎麼改變，都不怎麼須要改動頁面中的參數和邏輯。

結語

儘管接口適配能夠避免從新調整頁面既有邏輯，但無論如何仍是須要後端提早提供接口文檔的，由於最終的數據是由後端來提供的，若是指望的接口並無返回指定數據，而這些數據須要另外一個接口來獲取，從而致使頁面中的邏輯與現有數據不一致。

也就是說，儘管咱們能夠對接口進行適配，但仍是有必要提早了解一下後端返回的數據和所需的數據。