对后端返回的数据进行适配

Posted 2020-11-29 d2zs

为什么要做接口适配

同一个功能，后端返回的数据结构经常变动，导致前端写的逻辑也得相应的修改，而接口适配就是为了解决此问题，不管后端接口怎么变动，前端只需要调整适配的数据部分，而不会对页面已有逻辑造成影响。

请求接口的适配

拿登录功能来说，有账号密码字段。

请求登录（以前）

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>

可以看到以前我们总是按后端返回的数据结构，原样的写在页面里面，然而一旦后端数据结构发生了变更，我们就要找到所有使用此接口的页面，并调整相应参数。

现在的做法虽然看似代码变多了，但你会发现，页面中的数据结构是按照我们自己写的，所以后端的数据结构怎么改变，都不怎么需要改动页面中的参数和逻辑。

结语

尽管接口适配可以避免重新调整页面既有逻辑，但不管如何还是需要后端提前提供接口文档的，因为最终的数据是由后端来提供的，如果期望的接口并没有返回指定数据，而这些数据需要另一个接口来获取，从而导致页面中的逻辑与现有数据不一致。

也就是说，尽管我们可以对接口进行适配，但还是有必要提前了解一下后端返回的数据和所需的数据。