前言

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);
         });
     }
   });