在线商城项目04-接口约定和数据请求

简介

本篇我们主要进行如下工作:

  1. 接口约定
  2. 数据请求

1. 接口约定

本项目我们不做复杂的接口约定。目前仅约定如下返回规则。 返回数据至少要包含:code和msg code为‘000’表示数据正常返回,此时msg可以为空,code非000时表示处理异常,可以在msg中返回错误信息。目前我们仅约定一个异常

{
  "code": "102",
  "msg": "未登录"
}

实际当然没有这么简单,我们可能会约定几个错误集,比如‘000’代表正常,‘1’开头的表示账户相关错误信息,比如‘101’未注册,‘102’未登录,‘103’登录超时,‘104’密码错误等等,‘2’开头表示支付相关错误集等等,......。这些后续我们根据项目需求再进行约定。实际项目中大家根据与后端协商来约定。

2. 数据请求

数据请求我们使用axios,这里我们先不做二次封装,直接使用axios,等到后期需要的时候我们再进行封装。 关于axios的使用说明可以看这里,如果想看中文可以看这里

下面我们修改一下mock/goods.json,将"status": "0"修改为"code": "000"。然后安装一下axios,执行如下命令:

npm install --save axios

在GoodsList.vue文件中引入axios,并使用axios请求数据:

import axios from 'axios'

created () {
    this.getPrdList()
  },
  methods: {
    getPrdList () {
      axios.get('mock/goods').then((res) => {
        console.log(res)
        let data = (res && res.data) || {}
        if (data.code === '000') {
          this.prdList = data.result || []
          console.log(this.prdList)
        } else {
          alert(`err:${data.msg || '系统错误'}`)
        }
      })
    }
  }

可以看到,我们能成功请求到mock数据:

总结

本篇内容很简单,因为只是项目开始,并没有做复杂的接口定义,以及请求封装。同时大家也可以看到,其实本身实现请求功能是很简单的,之所以我们实际项目中的请求做了二次封装,那是有切实的需求需要我们去解决的。这点容后再说。我们提交修改。

git status
git diff
git commit -am "interface definition and import axios"
git push

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的技术专栏

vi 方向键和Backspace键失效问题的解决方法

982
来自专栏性能与架构

5个实用的Linux命令行技巧

1. 输出内容格式化 例如 mount 命令的输出结果看起来很费劲 ? 可以使用 column 对其进行格式化 mount | column -t ? 再比如有...

2976
来自专栏达摩兵的技术空间

linux之文件基本操作学习笔记

通过本教程你将熟悉linux文件的基本操作以及其具体使用。本文目录结构摘抄自《鸟哥的LINUX私房菜》基础学习篇(第三版)。

941
来自专栏我是攻城师

Spark如何在一个SparkContext中提交多个任务

6304
来自专栏钟绍威的专栏

linux常用命令之文件管理默认情况选项参数注意用法选项用法选项用法参数注意用法选项用法选项注意用法选项注意

LS ls:list directory contents 默认情况 默认情况下显示的是mtime 选项 -a 列出全部文件及目录包括隐藏的 -l 列出详细...

1779
来自专栏雨过天晴

转 Mac OS/Linux命令查询网络端口占用情况

1403
来自专栏云计算教程系列

Linux中ln的用法

ln是linux中一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目...

1866
来自专栏我是攻城师

kafka版本不一致导致的一个小问题(二)

5738
来自专栏不想当开发的产品不是好测试

Git 默认不区分大小写

背景: 通过代码规范,修改了包名为全小写(修改了文件夹目录),但发现push后,git服务器的文件夹目录还是为大写 解决方法: git默认是不区分大小写的,意思...

21310
来自专栏邹立巍的专栏

find 命令详解

find 命令是我们日常工作中比较常用的 Linux 命令。全面的掌握这个命令可以使很多操作达到事半功倍的效果。如果对 find 命令有以下这些疑惑,本文都能帮...

5341

扫码关注云+社区

领取腾讯云代金券