如何在微信小程序中优雅地发送异步请求

二、原生语法发送异步请求

在不进行封装的情况下，我们在项目的页面当中，可以小程序官方提供的API发起异步请求，例如:

wx.request({
          
   
  url: https://domain.com/1.1/classes/Stu,
  method:POST,
  header:{
          
   
    X-LC-Id: 自己的id, 
    X-LC-Key:  自己的key, 
    Content-Type:  application/json
  },
  data:{
          
   
    "name":"张无忌",
    "score":80,
    "gender":1
  },
  success:(res)=>{
          
   
    console.log(res);
  }
})

三、自定义封装异步请求

当然，从上面的异步请求代码可以看出，如果我们在每一个页面中，都直接用wx.request发起请求，会导致如下情况:

1. baseURL没有统一提取，不方便开发环境、生产环境之间的灵活切换
2. header请求头所携带的信息，需要每次异步请求的时候手动追加
3. 代码冗余度高

所以我们可以基于Promise对象，将wx.request进行二次封装

let base = https://domain.com/1.1

function fetchData(url,data,method="GET"){
          
   
  return new Promise((resolve,reject)=>{
          
   
    wx.request({
          
   
      url: base+url,
      method,
      header:{
          
   
        X-LC-Id: 自己的id, 
        X-LC-Key:  自己的key, 
        Content-Type:  application/json
      },
      data,
      success:(res)=>{
          
   
        resolve(res)    //此处的res会交给then
      },
      fail:(err)=>{
          
   
        reject(err)  //此处的err会交给catch
      }
    })
  })
}

function post(url,data={
           
    }){
          
   
  return http(url,data,POST)
}

function get(url,data={
           
    }){
          
   
  return http(url,data,GET)
}

module.exports = {
          
   
  fetchData,
  post,
  get
}

封装之后，我们可以将封装的模块在app.js中，挂载至全局属性

// app.js
let request = require(./utils/request)
App({
          
   
  onLaunch: function() {
          
   },
  ...request
})

后续在项目页面中需要发起异步请求的时候，只需要通过getApp()调用全局挂载的异步方法发起请求，极大降低代码冗余度，提高开发效率。

Page({
          
   
  bindViewTap(){
          
   
    let data = {
          
   
      "name":"张无忌",
      "score":80,
      "gender":1
    }
    getApp().post(/classes/Stu,data).then(res=>{
          
   
      console.log(res) 
    })
  }
})

四、使用fly.js处理异步请求

下载地址:

2. 对fly.js方法进行全局配置封装，添加拦截器等操作_//添加响应拦截器，响应拦截器会在then/catch处理之前执行_ fly.interceptors.response.use( (response) => { //只将请求结果的data字段返回 return response.data }, (err) => { //发生网络错误后会走到这里 //return Promise.resolve(“ssss”) } )

var Fly=require("../lib/wx") //wx.js为您下载的源码文件
// var Fly=require("flyio/dist/npm/wx") //npm引入方式
var fly=new Fly(); //创建fly实例

//添加请求拦截器
fly.interceptors.request.use((config,promise)=>{
          
   
    //给所有请求添加自定义header
    config.headers["X-Tag"]="flyio";
    return config;
})
//添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
    (response) => {
          
   
        //只将请求结果的data字段返回
        return response.data
    },
    (err) => {
          
   
        //发生网络错误后会走到这里
        //return Promise.resolve("ssss")
    }
)
//配置请求基地址
fly.config.baseURL="https://domain.com/1.1"
fly.config.headers={
          
   
  X-LC-Id: 自己的id, 
  X-LC-Key:  自己的key, 
  Content-Type:  application/json
}

3. 在项目页面中，可以直接使用封装后的fly模块进行异步请求

Page({
          
   
  //事件处理函数
  bindViewTap: function() {
          
   
    let data = {
          
   
      "name":"张无忌",
      "score":80,
      "gender":1
    }
    fly.post(/classes/Stu,data).then((d)=>{
          
   
      //输出请求数据
      console.log(d.data)
      //输出响应头
      console.log(d.header)
    }).catch(err=>{
          
   
      console.log(err.status,err.message)
    })
    ...
  })
})