wx小程序-request请求在项目实战中的封装

在小程序项目开发中，对请求做封装是比较常见的 *** 作，我们可以在封装过的请求里，做一些统一处理，比如统一配置、请求拦截、错误异常处理、授权处理等

好了，我们直接看干货，上代码

在项目根目录下新建一个request目录，再在目录下新建一个index.js文件，文件里的内容如下

好了，wx小程序request请求封装就到这了

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧

新建文件request.js，将请求的封装方法写在里面

页面调用，在页面的js文件中引用

小程序默认请求超时时间是60秒，等待时间有点长，我们可以在app.json中进行设置

每个页面请求的时候都要引用封装，还是有点麻烦。注意到小程序页面都可以获取app.js的实例（const app = getApp()），所以可以改一下封装，将封装方法直接暴露出去，在app.js中再配置POST/GET等请求；请求的url也可以抽出来写在一起，方便查找和修改。自己试一下吧~

//觉得有用的话，点个喜欢再走嘛（不要脸.jpg）

一、在pages同级创建request文件夹 在此文件夹下创建一个index.js文件夹 在此文件夹内写入封装的api

const request = (method,url,params) =>{               // method (请求方式)     url (请求的路径)   params (请求的参数)

  return new Promise((resolve,reject) =>{             // 创建一个promise函数 

    let baseUrl = "公共url"

    uni.showLoading({                                               // 添加加载动画

        title: '加载中'

    })

    uni.request({                                                         // 发送请求

        url: baseUrl + url,                                             // url 形参就是传入的地址

        data: params? params:'',                               // 传入的请求参数

        method: method,                                            // 传入的请求方式

        success: res =>{                                           // 成功的函数

          resolve(res.data)

          uni.hideLoading()

        },

        fail: err =>{                                                 // 失败的函数

          reject(err) 

          uni.hideLoading()

        }

    })

  })

}

const api = {

  get: (url,params) =>request("GET",url,params),

  post: (url,params) =>request("POST",url,params)

}

export default api                                                // 抛出接口

二、在request 文件目录下 创建一个 home文件夹  在home 文件夹内新建index.js文件

// 所有的首页的请求 ，都放在这里维护

import api from '../index.js'

export const get = params => api.get('路径',params)              // get请求

export const post = params => api.post('路径',params)              // post请求

三、在所需要请求数据的页面内

import  请求名  from '文件路径'

---