面题系列：请求方法我们平时常见的请求方法有哪些？POST与GET请求的区别?可以分享一下平常你是如何封装网络请求的吗？

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

题目描述

我们平时常见的请求方法有哪些？
POST与GET请求的区别?
可以分享一下平常你是如何封装网络请求的吗？

考察点

对于请求方法的了解
开发项目时网络封装的经验与思路

解题思路

目前知道的请求方法有GET、POST、PUT、PATCH、DELETE、COPY、HEAD、OPTIONS、LINK、UNLINK、PURG、LOCK、UNLOCK、PROPFIND、VIEW。

其中比较常用的如：GET、POST、PUT、DELETE。
POST与GET请求的区别：
- GET在浏览器回退时是无害的，而POST会再次提交请求。
- GET产生的URL地址可以被收藏，而POST不可以。
- GET请求会被浏览器主动缓存，而POST不会，除非手动设置。
- GET请求只能进行url编码，而POST支持多种编码方式。
- GET请求参数会完整保留在浏览器的历史记录里，而POST不会。
- GET请求在URL中传递的参数是有长度限制，而POST没有限制。
- 对参数类型，GET只会接收ASCII字符，而POST没有限制。
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能直接传递敏感信息。
- GET参数通过URL传递，POST放在Request Body中。
前端目前大部分使用的axios.js，里面可以通过create方法去创建，还可以设置服务器路径和超时等配置。用interceptors拦截器的request和response分别来发起请求和响应结果的拦截。

实现

以element-ui+axios为例：

import axios from 'axios'
import { Message, Loading } from 'element-ui';

const loading;

function startLoading() {
    loading = Loading.service({
        lock: true,
        text: "加载中..",
        background: "rgba(0,0,0,.7)"
    })
}

function endLoading() {
    loading.close();
}

// ES6 Promise的封装
const request = options => {
        // 创建axios的实例对象
        const instance = axios.create({
            baseURL: '', //配置请求服务器路径
            timeout: 5000 //超时
        })
        
        // 过滤器(拦截器)接收
        instance.interceptors.request.use(options => {
            startLoading();
            return options;
        })    
        
        // 过滤器(拦截器)响应
        instance.interceptors.response.use(res => {
            endLoading();
            return res.data;
        },err=>{
            endLoading();
            Message.error("系统错误");
        })

        // 发送真正的网络请求
        return instance(options)
}

export default request;

我们在其拦截器中，做了加载提示，发出请求开始加载框，接收响应时取消加载框。这是一个最简单的封装，在里面可以无限的扩展，来符合你自己的业务。

当然使request用起来也是非常清晰明了的，如下：

import request from "./request";

export function getBannerData() {
  return request({
    url: '/home/banner',
    method: 'get'
  })
}