访问API数据与ES6在小程序中的应用

看待组件的两种观点

组件复用

代码分离-（特别重要）

• 不能在一个页面写所有的代码，代码分离具有很强的可读性、可维护性

Blink Api 介绍与测试API

url前缀以bl.7yue.pro/v1开头

使用开发者key（appkey）访问API

• 在请求头的header里面携带appkey
• 将appkey做为请求参数

状态码和错误码

生命周期函数

小程序内部自己调用

名字是固定的

page({
 data: {},
 onLoad: function(option){},//监听页面加载,用于获取服务器数据
 onReady: function(){},//监听初次渲染完成
 onShow(){},//监听页面显示
 onHide: function(),//监听页面隐藏
  onUnload: function(){},//监听页面卸载
  onPullDownRefresh: function(){},//监听用户下拉动作
  onReachBottom: function(),//上拉触底事件的处理函数
  onShareAppMessage: function(){}//分享操作函数
})

wx.request-4xx状态码不会执行fail

注意：服务器返回的数据都会是success，当网络中断时才会走fail

访问API获取数据

wx.request({
 url: 'xxx',
 header: {
     appkey: 'xxx'
 }
})

同步、异步与回调函数

小程序里面的request都是异步的，它的优势是性能很高，但调试编程都比较难

ES6箭头函数与this指代

success:(res)=>{
 console.log(this.data.count);
}

let that = this;
...
  success: function(){
     console.log(that.data.count);
  }

正确理解Promise

正确的使用场景：异步嵌套

ES6 const常量

配置文件一般用const定义

const config = 2;
config = 3;//报错
config.appkey = 1；//不报错，因为没有修改config的内存地址

ES6 Module export 与 import

在类里面定义方法的写法

import {config} from 'xxx';
class HTTP{
 request(param){
     
 }
}

export const config = {
 
} 或
const config = {}
export {config}

HTTP类的封装与ES6 startsWith与异常处理

startsWith的用法

success: (res)=>{
 let code = res.statusCode.toString();
 if(code.startsWith('2')){
     
 }else {
     //错误处理
 }
}

错误处理

const tips = {
  1: '抱歉，出现一个错误'
 1005: 'appkey无效',
 3000: '期刊不存在'
}
class HTTP{
  request(param){
     ...
  }
 _show_error(error_code){
  if(!error_code){
         error_code = 1;
  }
     wx.showToast({
         title: tips[error_code],
         icon: 'none',
         duration: 2000
     })
 }
}

小程序开发-7-访问api数据与ES6在小程序中的应用