一、请求示例：

# 一、请求示例：

步骤1：在/common/request/api.js中添加接口请求函数

export const UserLogin = (data) => request("user/login", data, POST)    //登录
export const UserInfo = (data) => request("user/info", data, GET)       //获取用户信息

export const GoodsList = (data) => request("goods/list", data, GET)       //获取商品列表
export const GoodsDetail = (data) => request("goods/info", data, GET)     //获取订单详情
export const GoodsTypeList = (data) => request("goods/types", data, GET)  //获取商品分类列表

export const OrderList = (data) => request("order/list", data, GET)       //获取订单列表
export const OrderDetail = (data) => request("order/info", data, GET)     //获取订单详情

集中管理API，可以清楚看到项目中所使用的接口地址和请求方式，同时也便于修改。

简单的函数可以使用箭头函数，清晰明了；同时随时可以拓展函数内容，具有较高的灵活性。

编写规范：

推荐使用大驼峰命名函数，便于区分普通函数与接口函数。
将同一模块的接口写到一起，同一模块使用同一个单词前缀，模块与模块之间空行。

步骤2：在页面或者组件中，按需导入接口函数。

import { UserLogin } from "@/common/request/api.js"

export default {

    methods: {

        handleLogin(){
            UserLogin({
                account: "Herrona",
                password: "123456",
            }).then((res)=>{
                console.log("res", res)
            })
        },

    }
}

# 二、公共请求说明

# 1.请求方式的封装

在/common/request/methods中，拓展了请求方式，将Content-Type与请求方式封装在一起，用于声明请求方式与请求格式。

一般项目都是采用单一Content-Type形式，但是也有特殊情况两种情况都存在的，所以使用此方法加以区分。

在/common/request/api将这些常量导入使用。

// 添加_FROM表示application/x-www-form-urlencoded请求; 添加_JSON表示 application/json请求

export const GET_JSON = "GET_JSON"
export const GET_FORM = "GET_FORM"

export const POST_JSON = "POST_JSON"
export const POST_FORM = "POST_FORM"

export const PUT_JSON = "PUT_JSON"
export const PUT_FORM = "PUT_FORM"

export const GELETE_JSON = "GELETE_JSON"
export const GELETE_FORM = "GELETE_FORM"

export const GET = GET_JSON
export const POST = POST_JSON
export const PUT = PUT_JSON
export const GELETE = GELETE_JSON

# 2.请求头的封装

请求头以函数形式封装并且单独导出，可以用于请求和文件上传的请求头。

# 3.公共请求函数

基于uniapp的 uni.request() 进行封装, Promise风格。

主要实现了以下逻辑的深度封装：

基本请求域名, 读取/common/config/url中的apiBaseURL变量。实际请求地址为基本请求域名+api地址
获取真实的请求方式
对响应信息进行处理：

这里假设后端返回的接口标准格式为：

{
    "msg": "操作成功",
    "code": 1,
    "data": {}, //任意类型的数据
}

只有当自定义code为1或者200时，进入then回调，其他情况视为异常情况将进入catch回调。这样做的好处是then回调中无须再进行繁琐的code值判断。

对异常情况进行的默认处理有：

状态401时，表示未授权，此时将触发登录提示弹窗
请求失败例如请求超时、服务器问题等，将使用toast提示。

接口的灵活性拓展，请求函数的第四个参数为选项参数对象

接口不需要token验证时，可以在/request/api中，设置{ auth: false }，示例如下

export const UserLogin = (data) => request("user/login", data, POST, { auth: false })    //登录

接口不需要校验自定义code时，可以在/request/api中, 设置{ checkCode: false }。此时无论响应信息是什么结构都会进入then回调，示例如下

export const BankBind = (data) => request("bank/bind", data, POST, { checkCode: false })    //第三方绑卡

显示加载中Loading，默认为true(如果不需要则可以默认设置为false)。

如果某个接口不需要提示，可以在/request/api中, 设置{ load: false }。

或者自定义提示文本。示例如下：

export const CheckStatus = (data) => request("user/check", data, POST, { load: false })         //检查账号状态
export const UserUpdate = (data) => request("user/update", data, POST, { load: '正在提交' })    //修改账号信息

接口请求调试

为了方便开发调试，默认在开发环境中将监控每一次请求，若接口报错，将会弹出错误Modal框，可以进行错误复制，提升开发效率。

← Table 表格数据字典 →