uniapp封装接口请求

封装接口请求

作为前端开发者 少不了的就是对接口请求的封装了 对我来说也不例外了 原文也提供了详细的步骤 和 可复制的代码 详细步骤请查看

步骤1:在根目录下 新建一个文件夹 common 并新建request.js文件

let baseURL = ‘’; // 访问的地址 
let token = ‘’; // 一般用户的token 
let volunteerToken = ‘’; // 志愿者固有的token 
export const myRequest = (options) => { 
 return new Promise((resolve, reject) => { 
  uni.request({ 
   url: baseURL + options.url, //接口地址：前缀+方法中传入的地址 
   method: options.method || ‘GET’, //请求方法：传入的方法或者默认是“GET” 
   data: options.data || {}, //传递参数：传入的参数或者默认传递空集合 
   header: { 
    ‘token’: uni.getStorageSync(‘token’), //自定义请求头信息 
    ‘volunteerToken’: uni.getStorageSync(‘volunteerToken’) // 志愿者token 
   }, 
 
   success: (res) => { 
    //返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败) 
    // 如果不满足上述判断就输出数据 
    if (res.data.code == 200) { 
     resolve(res) 
    } else { 
     return uni.showToast({ 
      title: res.data.msg, 
      icon: ‘none’ 
     }) 
    } 
   }, 
   // 这里的接口请求，如果出现问题就输出接口请求失败 
   fail: (err) => { 
    console.log(err) 
    reject(err) 
   } 
  }) 
 }) 
}

步骤2: 还是在common 目录下新建 api.js 来写封装的每个请求

import { 
 myRequest 
} from ‘@/common/request.js’ 
 
// 一般用户登录 获取token 
export function userLogin(data) { 
 return myRequest({ 
  url: ‘wxApplet/login/wxLogin’, 
  method: ‘get’, 
  data 
 }) 
} 
 
// 自主申报登记 
export function checkIn(data) { 
 return myRequest({ 
  url: ‘wxApplet/checkIn’, 
  method: ‘post’, 
  data 
 }) 
} 

如果还有什么不懂 或者感觉不够详细的话 可以评论联系我