微信小程序封装网络请求

1.在utils文件夹中建一个api.js

// 获取小程序全局配置(变量、函数等)
const app = getApp()
// 定义网络请求API地址
const baseURL = '*******'//替换成你接口的地址
// 封装网络请求开始
const http = ({url,data,method} = {}) => {
    // 添加请求加载等待
    wx.showLoading({
        title: '加载中...'
    })
    // Promise封装处理
    return new Promise((resolve, reject) => {
        wx.request({
            // 请求地址拼接
            url: baseURL+url,
            data: data,
            // 获取请求头配置
            header: getHeader(),
            method: method,
            // 成功或失败处理
            complete: (res) => {
              console.log(res)
                // 关闭等待
                wx.hideLoading()
                // 进行状态码判断并处理
                if(res.data.code === 204){
                    resolve(res)
                }else if (res.data.code === 401) {
                    // 检测到状态码401,进行token刷新并重新请求等操作
                    refreshToken().then(()=>_refetch(url,data,method)).then(resolve)
                }else if(res.data.code !== 200){
                    // 获取后台返回报错信息
                    let title = res.data.message
                    // 调用全局toast方法
                    showToast(title)
                }else if(res.data.code === 200){
                    resolve(res)
                }else {
                    reject(res)
                }
            }
        })
    })
}
// 添加请求toast提示
const showToast = title =>{
    wx.showToast({
        title: title,
        icon: 'none',
        duration: 1500,
        mask:true
    });
}

// 进行url字符串拼接
const getUrl = url => {
  if (url.indexOf('://') == -1) {
    url = baseURL + url
  }
  return url
}
//获取用户userToken
function getHeader(){
    // 判断登录token是否存在
    if(wx.getStorageSync('userToken')){
        // 获取token并设置请求头
        var token = wx.getStorageSync('userToken')
        let auth = {
            'Authorization': token.token_type +" "+ token.access_token
        }
        return auth
    }
}
// 重构请求方式
const _fetch = (content) => {
    return http({
        url:content.url,
        data:content.data,
        method:content.method
    })
}
// 添加刷新之后的操作处理方法
const refreshToken = () => {
    return new Promise((resolve, reject) => {
        // 获取token
        var token = wx.getStorageSync('userToken')
        // 设置请求data
        let params = {
            refresh_token:token.refresh_token
        }
        // 进行token刷新请求
        wx.request({
            url: getUrl('/app/connect/refresh'),//登录接口
            data:params,
            // 设置请求header 鉴权
            header: {
                'Authorization': token.token_type +" "+ token.access_token
            },
            method:'post',
            // 请求响应处理
            complete: (res) => {
                if(res.data.code === 200 ){
                    // 全局存储token
                    app.globalData.usertToken = res.data.data
                    // Storage存储token
                    wx.setStorage({
                        key:"userToken",
                        data:res.data.data,
                        // 存储成功处理
                        success:function(){
                           resolve()
                        }
                    })
                }
            }
        })
    });
}
const _refetch = (url,data,method) => {
    return http({
        url:url,
        data:data,
        method:method
    })
}
//除开上面的调用方式之外,你也可以使用下面的这些方法,只需要关注是否传入method
const _get = (url, params = {}) => {
    return http({
        url,
        params
    })
}
const _post = (url, params = {}) => {
    return http({
        url,
        params,
        method: 'post'
    })
}
const _put = (url, params = {}) => {
    return http({
      url,
      params,
      method: 'put'
    })
}
const _delete = (url, params = {}) =>{
    return http({
      url,
      params,
      method: 'delete'
    })
}
module.exports = {
  baseURL,
  refreshToken,
  _fetch,
  _refetch,
  _get,
  _post,
  _put,
  _delete
}

2.在utils文件夹中的util.js文件里加上接口名字

// 接口名字
const ssLogin = '/api/v1/SSOLogin';//登录
module.exports = {
  ssLogin
}

3.例如在页面中用的时候

const api = require('../../utils/api.js')
const _requset = require('../../utils/util.js')
api._fetch({
      url: _requset.ssLogin,
      data:{
        token:"6461766064617C62646F7A"
      },
      method:'post'
    }).then(function (res) {
     console.log(res)
    }).catch(function (error) {
        console.log(error);
    });

以上是封装request请求的内容

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会为您详细解析微信小程序封装网络请求代码。 微信小程序网络请求有两种方式:一种是使用内置的wx.request()函数,另一种是使用第三方库进行封装。下面我们来介绍一下如何封装网络请求代码。 1. 创建一个request.js文件 首先,我们需要在项目目录下创建一个request.js文件。该文件用于封装网络请求代码。 2. 封装网络请求代码 在request.js文件,我们可以使用Promise对象来封装网络请求代码。下面是一个基本的封装代码: ``` function request(url, method, data) { return new Promise((resolve, reject) => { wx.request({ url: url, method: method, data: data, success: function (res) { resolve(res.data); }, fail: function (error) { reject(error); } }) }) } module.exports = { request: request } ``` 上面的代码,我们定义了一个request函数,它接受三个参数:url、method和data。其,url表示请求的地址,method表示请求的方法(GET或POST),data表示请求的参数。 该函数返回一个Promise对象,当请求成功时,调用resolve方法并传递返回的数据;当请求失败时,调用reject方法并传递错误信息。 3. 在页面使用封装代码 在页面使用封装网络请求代码非常简单。我们只需要在页面的js文件引入request.js文件,并调用request函数即可。下面是一个示例代码: ``` const request = require('../../utils/request.js'); Page({ data: { list: [] }, onLoad: function () { this.getList(); }, getList: function () { let url = 'https://xxx.xxx.xxx'; // 请求地址 let method = 'GET'; // 请求方法 let data = {}; // 请求参数 request.request(url, method, data) .then(res => { this.setData({ list: res }) }) .catch(error => { console.log(error); }) } }) ``` 上面的代码,我们在onLoad函数调用getList函数,该函数使用request函数发起网络请求。当请求成功时,将返回的数据存储到list;当请求失败时,打印错误信息。 以上就是微信小程序封装网络请求代码的详细解析。希望对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值