记录一下简单封装一个请求接口uniapp

原创已于 2022-02-11 17:08:05 修改 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #小程序 #uni-app

于 2021-12-17 17:23:33 首次发布

本文介绍如何使用uniapp封装请求接口，包括创建JS文件存放请求逻辑、定义接口地址及使用方法。并展示了两种请求方式，一种是通用的请求封装，另一种针对特定场景如登录验证的请求实现。

简单记录一下用uniapp开发小程序封装的请求接口：欢迎提出建议呀

首先开一个js文件啦：放你改造的请求

function request(url, data = {}, method = "get") {
    return new Promise(function (resolve, reject) {
        uni.request({
            url: url,
            data: data,
            methos: method,
            header: {
                'Content-Type': 'application/json', //自定义请求头信息
				// 'Authorization':''
            },
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err)
            }
        });
    })
}

module.exports={
    request
}

然后再建一个js文件啦：放你要调的接口和请求地址

let baseUrl = '基准路径'
module.exports = {
    list: baseUrl + '接口'
}

最后就可以去使用啦：

import utils from "../../utils/request.js"
import api from "config/api";

utils.request(api.list).then((res) => {
	console.log(res);
}).catch(err => {
	console.log(err)
});

way2：

let urlPath = '' // 项目的域名
export function post(url, data) {
  wx.showLoading({
    title: '努力加载中',
  })
// 由于微信不会保存后端用于登陆验证的cookie，这里需要自己从登陆返回的数据里取到cookie，然后本地缓存，请求时在header里带上cookie
  let header = {} 
  url === 'user/loginworker' // 通过传进来的url判断是否是登陆页
    ? header = {} 
    : header = {
      'content-type': 'application/x-www-form-urlencoded',
      'cookie': wx.getStorageSync("sessionid")
    } 
  return new Promise((resolve, reject) => {
    wx.request({
      url: urlPath + url,
      data: data,
      method: 'get',
      header: header, success(res) {
        console.log(res)
        if (res.statusCode === 200) {
          if (res.data === 9999) { // 与后端的后端返回9999表示cookie失效
            wx.showModal({
              content: '登陆超时请重新登陆',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  wx.navigateTo({
                    url: '../../pages/login/main',
                  })
                }
              }
            })
          } else if (res.data.code && res.data.code !== 200) { // 若返回coode码且不等于200表示传入参数有问题
            res.message = res.data.message, reject(res)
          } else resolve(res)
            // 存储cookie
          res.data.message === '登录成功。' ? wx.setStorageSync("sessionid", res.header["Set-Cookie"]) : ""
        }else {
          res.message = '服务器错误请求失败'
          reject(res)
        }
        wx.hideLoading()
      }, fail(err) {
        err.message = '请求超时请稍后再试'
        reject (err)
        wx.hideLoading()
      }
    })
  })
}