mpvue 微信小程序 cookie支持及wx.request 封装踩坑

Cookie 支持

项目使用 mpvue开发

因为需要某些功能需要登录，所以要保存cookie，但是微信小程序的wx.request默认是不会保存cookie的

搜了一下网上有的，大部分都是使用微信小程序自带的储存功能，将set-cookies的内容解析出来，存到微信自带储存里面

在wx.request的时候，再把储存里面的cookie拿出来，放到header里面

这里采用的是

weapp-cookie

首先打开项目，然后输入下面命令

npm install weapp-cookie --save

然后之后使用wx.request都会自动附带cookie了

wx.request封装

因为wx.request需要传入回调函数，用起来非常不方便

所以可以将其变成promise，用起来就很舒服了

下面是简单包装的一个库，将其保存为api.js，然后在用到的地方引入就可以了

function requestAll(url, data, header, method) {
  return new Promise((resolve, reject) => {
    wx.requestWithCookie({
      url: url,
      data: data,
      header: header,
      method: method,
      success: (res => {
        if (res.statusCode < 400) {
          //200: 服务端业务处理正常结束
          resolve(res)
        }
      }),
      fail: (res => {
        reject(res)
      })
    })
  })
}

/**
 * GET类型的网络请求
 */
function getRequest(url, data, header) {
  return requestAll(url, data, header, 'GET')
}

/**
 * DELETE类型的网络请求
 */
function deleteRequest(url, data, header) {
  return requestAll(url, data, header, 'DELETE')
}

/**
 * PUT类型的网络请求
 */
function putRequest(url, data, header) {
  return requestAll(url, data, header, 'PUT')
}

/**
 * POST类型的网络请求
 */
function postRequest(url, data, header) {
  return requestAll(url, data, header, 'POST')
}

export default {getRequest,deleteRequest,putRequest,postRequest}

这里给出一个简单的使用例子

import request from './api'


export default {
  data () {
    return {
    	content: ''
    }
  }, methods: {
	 request.getRequest('www.baidu.com').then( res => {
	     console.log(res.data)
	     this.content = res.data
     });
  }
}