前端请求后端接口大汇总，让前端不再受委屈! (三、处理接口响应)

“这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战”

为了写这系列的文章，我使用Nodejs编写了两个测试接口

//部署IP:
http://111.229.14.189/gk-api

//接口1.返回普通数据   返回前端发送的请求头请求体等信息
/util/test

//接口2.返回文件流    
/util/download?file=fileName

第一个接口会返回前端发送的一些数据信息,可以访问一下试一下：http://111.229.14.189/gk-api/util/test?id=123

第二个接口会返回一个文件流，也可以试一下：http://111.229.14.189/gk-api/util/download?file=1.jpg

本文主要讲前端如何处理后端的响应。

后端返回的数据一般有两种，普通的JSON数据的流。

普通JSON数据

普通的JSON数据根据前后端交互规范来处理

一般后端会定义业务状态码，业务状态码是区别于HTTP状态码的，

举个例子,后端返回的数据为{code:2000,meg:'success',data},用code来表示是否请求成功，规定如下：

• 2000 成功
• 400x 用户权限错误，需要跳转回登录页面
• 500x 服务器端错误
• 700x 数据库错误

如果后端没有返回状态码，直接返回数据（不推荐）,前端使用try-catch进行处理

流

后端返回的流一般有两种用途，一是用来下载，例如excel，二是用来预览，例如图片、视频音频等。

对于流我们的处理方式是，首先将二进制流数据转成Blob,Blob是浏览器可以处理的数据类型，然后通过URL.createObjectURL创建一个链接，拿到了链接之后，如果预览的话直接给对应的元素，如果下载的话调用下载的方法（下面的download）。

axios.request({
    url: STREAM_URL,
    params: { file: FILE_NAME },
    responseType: 'blob' //这条语句需要加上，告诉axios返回的数据类型是blob,否则需要手动把后端返回的数据转换成blob
})
//通过URL.createObjectURL方法得到一个可预览链接
const link=URL.createObjectURL(res.data)

//下载的话调用该方法 原理是利用a标签的download属性
export function download(link, name) {
    let eleLink = document.createElement('a')
    eleLink.download = name
    eleLink.style.display = 'none'
    eleLink.href = link
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
}

写个具体的实例，复制到Html页面中，即可使用

<script>
    const STREAM_URL = 'http://111.229.14.189/gk-api/util/download'
    const TEST_URL = 'http://111.229.14.189/gk-api/util/test'
    // 处理普通数据
    function sendRequest() {
        let formData = new FormData()
        formData.append('name', 'Jack')
        axios
            .request({
                url: TEST_URL,
                method: 'post',
                headers: {
                    token: 'ajdjfjdfjj'
                },
                params: {
                    page: 1,
                    pageSize: 10
                },
                data: {
                    name:'Jack',
                    age:11
                }
            })
            .then((res) => {
                console.log(res.data.data)
            })
    }

    // 处理流
    const handleStream = async () => {
        const FILE_NAME='1.jpg'
        const res = await axios.request({
            url: STREAM_URL,
            params: { file: FILE_NAME },
            responseType: 'blob' //这条语句需要加上，告诉axios返回的数据类型是blob,否则需要手动把后端返回的数据转换成blob
        })
        console.log(res)
        // 把流转换为链接
        const previewLink = URL.createObjectURL(res.data)
        console.log("handleStream -> previewLink", previewLink)
        // 预览
        previewElement(previewLink, 'img')
        // 下载
        download(previewLink,FILE_NAME)
    }

    function previewElement(link, tag) {
        const ele = document.createElement(tag)
        ele.src = link
        if (tag == 'video') {
            ele.controls = true
        }
        document.documentElement.appendChild(ele)
    }

    function download(link, name) {
        let eleLink = document.createElement('a')
        eleLink.download = name
        eleLink.style.display = 'none'
        eleLink.href = link
        document.body.appendChild(eleLink)
        eleLink.click()
        document.body.removeChild(eleLink)
    }
    // --------------------code:
    ;(function () {
        sendRequest()
        // handleStream()
    })()
</script>

代码地址

代码地址