mpvue——API請求封裝(小程序原生)

前言

能用,但不是最好的方法,最好的還是fly,因為為了以后多平台的考慮,最好使用fly.js,做之前先關閉校驗合法域名,因為我沒在后台進行配置

后台進行配置合法域名,按着官方給的配置就OK了,這里就不寫了,因為只是個測試,用的都是測試的appid

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

目錄結構

fly.js位於src下的utils目錄下,最后在main.js引入

 

封裝

這就是個很簡單很簡單的封裝,我也是一邊學一遍弄的,如有更好的還望賜教。

fly.js

promise的資料

//定義請求地址
const host = 'http://test.wangyangyang.vip/api/';

function request(url, method, data, header = {}) {
    wx.showLoading({
        title: '加載中' 
    })
    return new Promise((resolve, reject) => {
        wx.request({
            url: host + url,
            method: method,
            data: data,
            headers: {
                'content-type': 'application/json' // 默認轉為json格式
            },
            success: function(res) {
                wx.hideLoading();
                resolve(res.data)
            },
            fail: function(error) {
                wx.hideLoading();
                reject(false)
            },
            complete: function() {
                wx.hideLoading();
            }
        })
    })
}

function get(obj) {
    return request(obj.url, 'GET', obj.data)
}

function post(obj) {
    return request(obj.url, 'POST', obj.data)
}

export default {
    request,
    get,
    post
}

 

 

main.js

根目錄下的main.js中引入

import Vue from 'vue'
import App from './App'
import fly from './utils/fly'
Vue.prototype.$http = fly;

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

 

使用

直接在頁面中使用即可

this.$http.post({
        url:"live/get_liveinfo",
        data:{
            "token":"test6666",
            "uid":"1222",
        }
    }).then(res =>{
       console.log(res.status)
        if(res.status == 1) {
          this.user.userInfo = res.data
        } else {
          wx.showToast({
          title: '系統開小差', 
          icon: 'loading', 
          duration: 2000, 
          mask: true, 
        });
      }
    });

 

 在console中可以完整看到打印的值