uniapp之封装一个公共的带token的请求方法

1 创建一个文件名为config.js

const baseurl = 'http://xxx:9090/';  //公共接口请求地址
export default baseurl;

2 在登录接口返回数据的那步,将token存进缓存中

                 // 存储token
                        uni.setStorage({
                            key: 'token',
                            data: res.data.access_token,
                            success: function () {
                                uni.getStorage({
                                    key: 'token',
                                    success: function (res) {
                                        console.log(res.data);
                                    }
                                });
                            }
                        });

 在uni.getStorage  API中打印,会发现已经可以拿到缓存的token数据了

3 创建一个公共请求文件 requst.js

如果token不存在,就返回到登录界面。baseurl为公共的接口地址

 import baseurl from './config.js'
// 公共的请求
 const request = function(options) {
     options.url = baseurl + options.url;
     try {
       const token = uni.getStorageSync('token');
       const username = uni.getStorageSync('username');
       debugger
       if (token) {
         options.header = {
           'Authorization' : 'Bearer ' + token
         };
        }else{
            uni.navigateTo({
                url: '../../login/login/login' 
            });
            return;
        }
     } catch (err) {
      console.log(err)
    }
    return uni.request(options);
  }
export default request;

4 去相应界面使用

  import request from '../../../request.js'               //引进requst方法

  onShow:function(){
            request({
                url:"message/messages",
                method:'get',
                success: function (res) {
                    console.log(res.data);
                }
            })    
        }

 

上面的方法,有一点残缺的地方,就是比如有接口的基础地址不是baseurl,该如何? 有接口的请求头有新的要求,又该如何? 不想每个界面都引入request文件,又该如何?

增加几个判断,使得封装更严谨。

如果不想每个界面都引入,可以全局注册。

1、在main.js中注册

2、 去相应界面使用,用this.$requset

<think>好的,我需要帮助用户在UniApp封装一个通用的请求接口方法。首先,我需要回顾一下用户提供的引用内容,看看有什么可以参考的信息。 用户提供了几个引用,其中提到在api文件夹下创建index.js或api.js文件,引入请求方法,然后定义并导出各个接口函数。例如,引用[1]和[3]展示了如何通过request方法发送POST请求,参数包括url、method和data。引用[4]提到在main.js中引入请求类并设置为全局对象,这可能涉及到封装一个请求类,然后挂载到uni对象上。引用[5]则提到了在页面中引入apiService来使用封装好的接口方法。 接下来,我需要把这些信息整合成一个通用的请求封装方法。通常,这样的封装需要考虑以下几个方面: 1. **基础配置**:设置基础URL、超时时间、请求头等。 2. **拦截器**:处理请求前的操作(如添加token)和响应后的处理(如错误处理)。 3. **请求方法封装**:创建通用的request函数,支持不同HTTP方法。 4. **接口统一管理**:将各个接口集中管理,方便维护。 5. **全局挂载**:可能需要将封装方法挂载到全局对象,方便各个页面调用。 根据引用[1]和[3],接口函数是通过调用request方法并传入配置对象来实现的。例如,getForumType和sendForum函数使用request方法,指定url、method和data。因此,封装的重点在于创建一个灵活的request函数,能够处理各种请求配置,并且有良好的错误处理机制。 引用[4]提到了在main.js中引入Request类并设置为uni.$http,这说明可能需要创建一个请求类,并在其中处理拦截器和基础配置。这可能涉及到使用uni.request的底层API,然后进行封装。 现在需要考虑步骤: 1. **创建请求工具类**:如request.js,处理基础配置、拦截器、请求发送。 2. **接口统一管理**:在api目录下的index.js中定义各个接口函数,引用request.js中的方法。 3. **全局挂载(可选)**:将api的方法挂载到全局,方便调用,如引用[4]所示。 4. **示例代码**:展示如何在不同页面中使用封装好的接口。 可能遇到的问题包括如何处理不同的请求方法(GET、POST等)、如何处理请求头和响应数据、如何处理token等鉴权信息。根据引用中的示例,通常会在请求拦截器中添加token请求头中,如引用中的代码可能没有展示,但这是常见做法。 另外,错误处理需要统一,比如网络错误、服务器返回的错误状态码等,可以在响应拦截器中处理,给出提示信息。 现在需要将这些内容结构化,按照用户的要求分步骤说明,并提供代码示例。同时,确保使用正确的LaTeX格式,如行内公式用$...$,独立公式用$$...$$,但在这个问题中可能不太涉及数学公式,所以可能不需要使用。不过要注意用户的其他格式要求,如代码块、引用标识等。 最后,生成相关问题,可能涉及封装的好处、如何添加拦截器、如何处理跨域、如何管理不同环境下的基础URL等。</think>以下是在UniApp封装通用请求接口的完整教程,结合代码示例和最佳实践: ### 一、基础请求方法封装 1. **创建`utils/request.js`文件** ```javascript let BASE_URL = 'https://api.example.com' // 按需修改 const request = (options) => { // 添加请求拦截器 return new Promise((resolve, reject) => { uni.request({ url: BASE_URL + options.url, method: options.method || 'GET', data: options.data || {}, header: { 'Content-Type': 'application/json', 'Authorization': uni.getStorageSync('token') || '' // 自动添加token }, success: (res) => { // 响应拦截器 if (res.statusCode !== 200) { uni.showToast({ title: '网络请求失败', icon: 'none' }) return reject(res) } if (res.data.code !== 0) { // 假设0为成功状态码 uni.showToast({ title: res.data.msg, icon: 'none' }) return reject(res.data) } resolve(res.data.data) }, fail: (err) => { uni.showToast({ title: '网络连接异常', icon: 'none' }) reject(err) } }) }) } export default request ``` ### 二、接口统一管理 2. **创建`api/index.js`** ```javascript import request from '@/utils/request.js' // 登录接口示例 export const login = (phone, password) => { return request({ url: '/user/login', method: 'POST', data: { phone, password } }) } // 获取用户信息 export const getUserInfo = () => { return request({ url: '/user/info', method: 'GET' }) } ``` ### 三、全局配置(可选) 3. **在`main.js`中挂载** ```javascript import * as api from './api/index.js' uni.$api = api // 通过uni.$api调用所有接口 ``` ### 四、页面调用示例 ```javascript // 方式1:直接引入 import { login } from '@/api/index.js' // 方式2:使用全局方法 export default { methods: { async handleLogin() { try { const res = await uni.$api.login('13800138000', '123456') console.log('登录成功:', res) } catch (e) { console.error('登录失败:', e) } } } } ``` ### 五、功能扩展建议 1. **环境配置**:通过`process.env.NODE_ENV`区分开发/生产环境 ```javascript // request.js if (process.env.NODE_ENV === 'development') { BASE_URL = 'http://dev.api.com' } ``` 2. **文件上传**:封装上传方法 ```javascript export const uploadFile = (filePath) => { return new Promise((resolve, reject) => { uni.uploadFile({ url: BASE_URL + '/upload', filePath, name: 'file', success: (res) => resolve(JSON.parse(res.data)), fail: reject }) }) } ```
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值