微信小程序获取数据

前言

1. 小程序只支持 https
2. 需要到小程序后台配置域名白名单
3. 项目中请求了非 https 和不在域名白名单上的接口会报错
4. 开发时可以取消域名校验,就可以请求任意接口,设置方法
   小程序右上角详情 =》本地设置 => 不校验合法域名...

(一) 发送请求

文档地址 文档首页 => api => 网络 => 发起请求

// 示例
wx.request({
  url: "test.php", //仅为示例，并非真实的接口地址
  data: {
    x: "",
    y: ""
  },
  method: "get", // 也可以是post
  header: {
    "content-type": "application/json" // 默认值
  },
  // 成功的回调
  success(res) {
    console.log(res.data);
  },
  // 失败的回调
  fail(error) {
    console.log(error);
  },
  // 不管是成功还是失败都会调用此方法
  complete() {
    console.log("done");
  }
});

(二) 使用 promise 封装请求

1. 配置baseUrl

   // config.js
   

let env = 'prod';
let baseUrl = "";
if (env === "dev") {
// 本地地址
baseUrl = "https://localhost:3009"
} else if (env === "prod") {
baseUrl = "https://huruqing.cn:3009"
}

// 导出
export { baseUrl }

2. ##### 新建/utils/reques.js 文件,内容如下

```js
import { baseUrl } from "./config.js";

/**
 * 封装请求
 * url：请求地址
 * data：请求参数
 * method: 请求类型
 */

const request = (url, data, method) => {
  // 获取token,登录时存的
  let token = wx.getStorageSync("token");
  url = baseUrl + url;
  return new Promise((resolve, reject) => {
    // 请求
    wx.request({
      url,
      method,
      data,
      header: {
        "user-token": token
      },
      success: res => {
        if (res.data.code == 666) {
          resolve(res.data);
        } else if (res.data.code == 603) {
          wx.removeStorageSync("token");
          wx.showModal({
            title: "提示",
            content: "登录已过期，是否重新登录",
            success(res) {
              if (res.confirm) {
                // 跳转到个人中心页面
                wx.switchTab({
                  url: "/pages/my/my"
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            }
          });
        } else {
          reject(res.data.msg);
        }
      },
      fail: err => {
        reject("网络异常");
      }
    });
  });
};

const get = (url, data) => {
  return request(url, data, "get");
};

const post = (url, data) => {
  return request(url, data, "post");
};

export default {
  get,
  post
};

2. 挂载到 app,在页面中就不需要重复加载

// app.js

import request from "./utils/request.js";
App({
  onLaunch: function() {
    this.$get = request.get;
    this.$post = request.post;
  }
});

3. 在页面中使用

   // my.js
   
   // 获取app对象
   const app = getApp();
   Page({
     onShow() {
       this.getData();
     },
   
     // 发送请求
     getData() {
       let url = "xxxxx";
       let data = { xxx: xxx };
       app
         .$get(url, data)
         .then(res => {
           console.log(res);
         })
         .catch(err => {
           console.log(err);
         });
     }
   });