简介

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

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

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

步骤

1. 模块安装

使用 npm 命令进行安装

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

npm install axios -savenpm 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);   })

结束语

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

转载地址：http://gtvii.baihongyu.com/

你可能感兴趣的文章