7.访问API数据与ES6语法在小程序中的应用。

1.本章节介绍第6章页面没有实现获取API的数据，流行页面使用5个组件来完成，每个组件是需要数据来

填充的，从服务器取数据，然后分门别类的传递到组件中去。

2.获取数据GET  提交数据POST （评论） 更新数据PUT

3.获取API 最新的数据，应该在111OnLoad声明周期函数中，因为我们要第一时间获取服务器返回的数据，而222onShow

和3333 OnRead 要比OnLoad晚点执行

4.wx.request(Object) 专门向服务器发送数据请求的，可以参考官网说明使用方法： https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

提醒下fail回调函数，只会在断网的时候，才会调用这个函数。2xx 4xx的状态码 都是会调用success这个回掉啊函数的

5.在项目开发阶段，我们可以关闭掉小程序的效验HTTPS 合法域名等。小程序要最终上线发布的话，必须

要在小程序后台添加访问的域名才可以。

6.封装wx.request 的请求，因为我们不可能在每个页面中需要请求数据的时候，都要每写一遍请求方式。

这样代码就冗余了。可以一次封装 四处调用 （异步调用 小程序里面只有异步请求数据的）

 onLoad: function (options) {
    wx.request({
      url: 'http://bl.7yue.pro/v1/classic/latest',
      header:{
      }
    })
  },

我们是在success(){} 接受异步调用的返回结果，success本身就是一个回调函数，什么时候调用success，不是我们

决定的，而是服务器返回数据的时候，小程序会触发success的回调函数执行，同时它会把服务器调用的结果，当做一个

参数，我用res   就是服务器返回的结果。

7.简单介绍Promise

        //使用promise 实现 wx.request 获取数据请求
        const promise = new Promise((resolve,reject)=>{
            wx.request({
                url: 'http://bl.7yue.pro/v1/classic/latest',
                header:{
                appkey:'djfiefje'
                },
                success:(res)=>{
                    resolve(res)
                }
            })
        })
        promise.then((res)=>{
            console.log(res);
        })

这个就是Promise 的异步请求数据格式。那么在什么场景下 使用Promise 以及怎么使用Promise呢？

答：1.回调地狱 就是回调函数的嵌套太多了。 剥夺return  

2.Promise 不会剥夺return  不要滥用Promise   可以解决异步嵌套问题    

8. 如果服务器返回是400 或者500 的错误呢 我们必须要在回调函数中做处理判断的阿？

下面就是封装二次wx.request({}) 方法。

8.1 定义一个基础配置 在根目录下创建一个config.js

//定义一个config 基本配置项  减少代码的wx.request({})的代码冗余
const config = {
  api_base_url: 'http://bl.7yue.pro/v1/',  //基地址
  appkey: "sjifnigonb",  //服务器权限
} 
// 抛出 ES6 Module模板方法 ES6认为每个xx.js 都是一个模块 config 对象
// 如果想更改  变量名的话
// export {config as config1}   当然也可以直接在const 前面加上export 

export {config}


/*
       url  前半段 可以配置(基地址)
       header（appkey）  可以配置
       使用固定不变的常量 我们就使用const   常量是不能被改动的
       config  = 1   报错   常量只会判断内存地址
       config.name = "dsfdig"  不报错  内存地址没变*/

然后在util 可以理解为静态的资源文件： 下面创建一个http.js文件

// 首先使用ES6 Module 导入需要的JS模块
import {config} from "../config.js"

// 给用户 更精确的 更良好的 错误反馈信息
const tips = {
  1: '抱歉，出现了一个错误',
  1005:'appkey无效，请前往www.7yue.pro申请',
  3000:'期刊不存在'
}
// ES6 class类   格式 class 类名  {方法（不需要function）}

class HTTP {
  request(params){
    if(!params.method){
      params.method = "GET"
    }
    wx.request({
      url:config.api_base_url+params.url,
      method:params.method,
      data:params.data, 
      header:{
        "content-type":"application/json",
         "appkey":config.appkey
      },
      success:(res)=>{
        let code = res.statusCode.toString();
        if(code.startsWith('2')){
          params.success(res.data)
        }else{
          let err_code = res.data.error_code;
          this._show_error(err_code);
        }
      },
      fail:(err)=>{
        this._show_error(1);
        }
      })
  }



  // 定义错误的信息声明函数
  _show_error(error_code){
    if(!tips[error_code]){
      // fail 报错就会将error_code实参变成属性1
      error_code = 1
    }
    wx.showToast({
      title:tips[error_code], //访问对象的属性就是[]
      icon:'none',
      duration:2000
    })
  }
}
export {HTTP}

我们给wx.request({}) 进行二次封装，是为了 给用户的具体反馈 ，良好的体验

ES6 class 类的定义方式：

ES6  class  类名{
            // 添加类名下面的方法。  不需要function 
            // 方法体  === 视作函数
            // 类名下面的方法 request方法
            request(params){
                // 在这个方法下面 访问我们的API
                wx.request({

                })
            }
        }