在线商城项目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