封装接口请求
作为前端开发者 少不了的就是对接口请求的封装了 对我来说也不例外了 原文也提供了详细的步骤 和 可复制的代码 详细步骤请查看
步骤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
})
}
如果还有什么不懂 或者感觉不够详细的话 可以评论联系我