简介

美团出品的 mpvue 是基于 vue 的多端小程序开源框架，可以用来开发微信（wx）、支付宝（my）、百度（swan）、头条（tt）的小程序。今天主要说的是在微信小程序端封装 axios 函数。

对于数据请求，微信官方有相关的数据请求模块，只是如果我们在大量使用的时候会产生冗余代码，为了使用方便，减少代码量，我们推荐自己封装请求函数。

很多人说mpvue不支持axios插件，（主要是某些教育机构的讲师，如果不知道请不要妄下结论，容易误导新手），只能使用fly.js进行请求。其实mpvue是可以用 axios 来请求数据的，只是需要多做些操作，下面我们一起来封装 axios 函数吧！

步骤

1. 模块安装

使用 npm 命令进行安装
qs 是用来对数据进行格式化的，可以根据自己的需要选择装或者不装

npm install axios -save
npm install qs -save

2. 引用
在 main.js 引入，并设置为 Vue 的原型属性

import axios from 'axios'
import qs from 'qs'
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

3. 新建 request.js 文件封装函数

import axios from 'axios'
import qs from 'qs'

//设置根路径，可以在后期需要发送请求时使用 简写url  
const baseUrl =  'http://***';//这里为服务器地址，或者叫接口地址
axios.defaults.baseURL = baseUrl;

//解决微信小程序直接使用 axios 会报错的问题
axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    let data = config.method === 'get' ? config.params : qs.stringify(config.data)
    // wx小程序 发起相应请求
    wx.request({
      url: baseUrl + config.url,
      method:config.method,
      data:data,
      success:(res)=>{ return resolve(res)},
      fail:(err)=>{return reject(err)}
    })
  })
}

//封装 axios 请求函数
function call(url,params={},method='GET'){
  return axios({
    method,
    url,
    params
  })
}

export default {
    call: call
}

注意：文件写完了不要忘记在 main.js 文件中引入，否则不就白写了????

import req from "@/utils/request";
Vue.prototype.$req = req;//设置原型，方便在全局中随时使用

4. 使用
接下来就到了激动人心的时候了，我们就可以在页面中轻而易举的请求数据了。
使用方法如下：

this.$req
   .call('****')//这里为数据路径
   .then(res => {
   	   //这个 data 就为我们想要的接口数据啦
       console.log(res.data);
   })
结束语

函数封装的过程是我在实际项目中截取的部分重要代码，按照步骤走应该是可以成功获取数据的。如果在学习过程中遇到任何问题，欢迎关注随时讨论。有些文章会教大家使用拦截，那个也是因人而异，主要以理解为主，切不能生搬硬套那样对知识的储备没有帮助。