登陆模块（四）-axios- async 与 await 使用 和 json-server 配置 虚拟api数据

10-axios-async与await使用

• 是ES6提供的新语法，async await 修饰函数的关键字。

  • 让异步的代码书写可以使用同步的方式，逻辑更加清晰，优雅一些。
  • 基于promise对象使用。

• 模拟场景：当你请求A接口返回数据后，再次去请求B接口获取数据。

实现代码：src/views/test/index.vue

export default {
     
  async created () {
     
    console.log('ok')
    // 使用 promise 方式
    // 调用A
    // this.$http.get('http://localhost:3000/a').then(res => {
     
    //   console.log(res.data)
    //   // 调用B
    //   return this.$http.get('http://localhost:3000/b')
    // }).then(res => {
     
    //   console.log(res.data)
    // })

    // 函数的返回值  加载await之后  是then接受的数据
    // 在使用await之后在 外层函数必须用async 来申明
    const resA = await this.$http.get('http://localhost:3000/a')
    const resB = await this.$http.get('http://localhost:3000/b')
    console.log(resA.data, resB.data)
  }
}

总结：

• awiat 修饰返回promise对象的函数，结果：得到成功后的数据。
• awiat 使用只能在async修饰的函数内，在awiat的外层函数加上async关键字。
• awiat 修饰的函数 只会阻碍程序运行的，async关键字修饰函数 异步函数。

附：json-server 详解

JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。

安装json-server

npm install -g json-server

启动 json-server

***json-server可以直接把一个json文件托管成一个具备全RESTful风格的API***,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。

db.json文件的内容：

{
     
  "course": [
    {
     
      "id": 1000,
      "course_name": "马连白米且",
      "autor": "袁明",
      "college": "金并即总变史",
      "category_Id": 2
    },
    {
     
      "id": 1001,
      "course_name": "公拉农题队始果动",
      "autor": "高丽",
      "college": "先了队叫及便",
      "category_Id": 2
    }
  }
}

例如以下命令，把db.json文件托管成一个 web 服务。

$ json-server --watch --port 53000 db.json

输出类似以下内容，说明启动成功。

\{
     ^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:53000/course

Home
http://localhost:53000

Type s + enter at any time to create a snapshot of the database
Watching...

此时，你可以打开你的浏览器，然后输入：http://localhost:53000/course

示例文件，见下图：

快速启动json-serve,命令行如下：