其他分享
首页 > 其他分享> > mpvue入坑之旅(三)网络请求

mpvue入坑之旅(三)网络请求

作者:互联网

mpvue入坑之旅(三)网络请求

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)触发点击事件,查看日志(请求成功了,这里报错是接口的校验问题,下节了解微信登录)
在这里插入图片描述

标签:function,mpvue,请求,url,res,data,network,入坑,wx
来源: https://blog.csdn.net/qq_23470315/article/details/110222506