前端请求后端接口大汇总，让前端不再受委屈! (二、用啥发)

_红领巾
5,330 阅读2分钟

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

本系列主要总结前端请求后端接口的一些知识。看第二篇文章之前，希望你先看下第一篇文章：

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

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

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

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

本文主要讲发送数据请求的工具，以及每种工具如何在URL中设置数据,如何在Header中设置数据，如何在Body中设置数据。

XMLHttpRequest

XMLHttpRequest是浏览器最早支持的用于异步编程的API，放一个文档供参考->MDN文档

使用XMLHttpRequest发送数据的过程如下所示(发送请求过程都添加了注释)：

<script>
    
    const TEST_URL = 'http://111.229.14.189/gk-api/util/test'
    const TOKEN = 'Beard facajjdfjdjfjajdfj238u3284'
    // 测试数据
    const TEST_DATA = {
        json: JSON.stringify({ name: 'Jack', password: '123456' }),
        url: 'name=Anna&password=123456'
    }
    const CONTENT_TYPE = {
        json: 'application/json',
        url: 'application/x-www-form-urlencoded'
    }
    // -------------------code 
    ;(function () {

        // 1. 实例化XMLHttpRequest对象
        const xhr = new XMLHttpRequest()

        // 2. 初始化一个请求 xhrReq.open(method, url, async);
        xhr.open('POST', TEST_URL)

        // 3. 设置请求头
        xhr.setRequestHeader('Content-type', CONTENT_TYPE.url)
        xhr.setRequestHeader('token', TOKEN) //自定义请求头

        // 4. 发送请求
        xhr.send(TEST_DATA.url)

        // 5. 获取响应
        xhr.onload = function () {
            if (xhr.readyState == 4) {
                console.log('所有响应头', xhr.getAllResponseHeaders())
                console.log('单个响应头', xhr.getResponseHeader('content-type'))
                console.log('响应体类型',typeof xhr.response)
                console.log('响应体', xhr.response)
                document.write(xhr.response)
            }
        }
    })()
</script>

整体流程看上面的注释内容

  1. 实例化XHR对象 const xhr=new XMLHttpRequest()
  2. 初始化请求,调用open方法，设置请求的方法、url以及是否同步 xhr.open(method,url,async)
  3. 设置请求头，这里需要注意，需要根据请求体数据的类型设置content-type头
  4. 发送请求。 xhr.send(data)
  5. 在onload回调函数中获取响应，可以拿到响应头xhr.getAllResponseHeaders()以及响应体xhr.response()

Fetch API

Featch API是浏览器新增的获取资源的API，返回Promise，用于替代XMLHttpRequest API。

同上，详细介绍放一个 MDN文档

它用法也很简单

<script>
    const TEST_URL = 'http://111.229.14.189/gk-api/util/test'
    const TOKEN = 'Beard facajjdfjdjfjajdfj238u3284'
    // 测试数据
    const TEST_DATA = {
        json: JSON.stringify({ name: 'Jack', password: '123456' }),
        url: 'name=Anna&password=123456'
    }
    const CONTENT_TYPE = {
        json: 'application/json',
        url: 'application/x-www-form-urlencoded'
    }
    //1. then写法
    const getData = function () {
        fetch(TEST_URL, {
            method: 'POST',
            headers: {
                token: TOKEN,
                'Content-type': CONTENT_TYPE.url
            },
            body: TEST_DATA.url
        })
            .then((res) => {//在一个promise中确定响应数据应该如何被处理
                return res.json()
            })
            .then((res) => {//在第二个promise中处理响应数据
                console.log('res', res)
            })
    }
    //2. async await 写法
    const getData1 = async () => {
        const res = await (await fetch(TEST_URL)).json()
        console.log('getData1 -> res', res)
    }
    // -------------------code
    ;(function () {
        getData()
        getData1()
    })()
</script>

函数签名fetch(URL,{method,headers,body}),无论请求是否成功，都会返回一个Promise对象，需要再resolve一下，才能拿得到请求结果。所以需要.then两次。套路化的写法，记住即可。

AXIOS

AXIOS是一个请求库，基于XMLHttpRequest进行封装，用起来很简单。

放一个中文文档供参考

AXIOS推荐使用以下写法:

axios.request({
    url: URL,
    method: 'post',//get方法可以省略
    headers: {//http请求头
        token: 'Beard iuflaoweinvhauh'
    },
    params: {//get方法请求参数  ?page=1&pageSize=10
        page: 1,
        pageSize: 10
    },
    data: {//http请求体 
        name: 'Jack'
    }
})

说明： AXIOS会根据你的数据格式自动设置Content-Type头，很贴心。

下篇文章写，处理接口响应，包括普通JSON数据的处理，以及流(图片、excel等文件)的处理。

avatar
文章
阅读
粉丝