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

为何要作接口适配

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

请求接口的适配

拿登陆功能来讲，有帐号密码字段。

请求登陆（之前）

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>

能够看到之前咱们老是按后端返回的数据结构，原样的写在页面里面，然而一旦后端数据结构发生了变动，咱们就要找到全部使用此接口的页面，并调整相应参数。

如今的作法虽然看似代码变多了，但你会发现，页面中的数据结构是按照咱们本身写的，因此后端的数据结构怎么改变，都不怎么须要改动页面中的参数和逻辑。

结语

尽管接口适配能够避免从新调整页面既有逻辑，但无论如何仍是须要后端提早提供接口文档的，由于最终的数据是由后端来提供的，若是指望的接口并无返回指定数据，而这些数据须要另外一个接口来获取，从而致使页面中的逻辑与现有数据不一致。

也就是说，尽管咱们能够对接口进行适配，但仍是有必要提早了解一下后端返回的数据和所需的数据。