06.小程序中的异步请求wx.request,级封装

在小程序中发送异步请求

• 对比 web 端的异步请求：

  • web 端

    • XMLHttpRequest
    • $.ajax()
    • axios

  • 小程序

    • wx.request({
      	url: '', // 请求的路径
      	method: "", // 请求的方式
      	data: {}, // 请求的数据
      	header: {}, // 请求头
      	success: (res) => {
            	// res  响应的数据
      	}
      })
      

    • 注意点：

      • 小程序请求豆瓣接口
        • 必须携带 APIKey
        • 必须设置请求头： content-type: json

• 合法域名

  • 概念：
    • 微信限制了小程序向其它服务器发送请求的能力
    • 如果要向其它服务器发送请求必须设置合法域名
  • 步骤
    • 登录小程序后台
    • 开发 —》 开发设置 —》request 合法域名 —》动态添加
  • 注意点：
    • 如果不想设置合法域名
      • 在详情中勾选不校验合法域名，也可以发送请求到其它服务器
        • 1.0 只能在开发工具中起效果
        • 2.0 如果将来上线，小程序依旧无法请求响应的服务器

5.0 使用 promise 封装 wx.request

• 前置 promise

  • 是什么

    • es 中内置的一个对象

  • 有什么用

    • 解决 js 中的回调地狱

  • 怎么用

    • 创建对象

      • var p = new Promise((resolve, reject) => {
          // 逻辑代码
          if () {
            resolve(data)
          } else {
          	reject(err)
          }
        })
        

    • 调用方法

      • p.then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
        

• 开始封装

  • 步骤：
    • 1.0 创建一个单独的 js 文件
    • 2.0 在 js 文件中通过 promise 对象将 wx.request 进行封装
    • 3.0 在代码中引入并且使用

6.0 使用 async & await 来改造 promise

• 概念
  • 是什么
    • ES7 中提出的新的技术
  • 有什么用
    • 将 promise 对象中异步的方法以同步的方式进行书写
• 用法：
  • async：
    • 用来修饰异步代码所在的函数
  • await
    • 用来修改异步代码
  • 结果：
    • 异步代码会返回一个结果：操作完成后的结果
  • 特点：
    • 异步代码虽然是以同步的方式进行书写，但是依旧是异步执行的
    • await 修饰的对象一定要返回一个 promise 对象