mpvue入坑之旅（三）网络请求

• 1 封装请求方法
• 2 实例

1 封装请求方法

在小程序环境下，只能使用小程序官方提供的 wx.request 方法发送外部请求，但这个方法有很多冗余，所以在开发前，先封装一下。
1）在utils目录下，新建文件 network.js

//请求地址
let apiUrl= 'http://www.abc.com/api/'

function request(url, method, data, header = {}) {
  wx.showLoading({
    title: '加载中'
  })
  return new Promise((resolve, reject) => {
    wx.request({
      url: apiUrl + url,
      method: method,
      data: data,
      headers: {
        'content-type': 'application/json' // 默认转为json格式
      },
      success: function(res) {
        wx.hideLoading()
        resolve(res.data)
      },
      fail: function(res) {
        wx.hideLoading()
        reject(res.data)
      },
      complete: function() {
        wx.hideLoading()
      }
    })
  })
}

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

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

export default {
  get,
  post
}

2）根目录下main.js引入network.js

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

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

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

3）页面中直接使用

this.$http.post({
  '/login', {'token': 'token'}
}).then(res =>{
  console.log(res.data)
});

2 实例

1）springboot搭建后台，可以参考 https://blog.csdn.net/qq_23470315/article/details/105288377

2）demo中index有绑定点击方法，稍作修改测试网络请求

bindViewTap () {
  this.$http.post({
    '/wx/login', { }
  }).then(res => {
    console.log(res)
  })
},

3）执行 cnpm run build，编译
4）触发点击事件，查看日志(请求成功了，这里报错是接口的校验问题，下节了解微信登录)