uniapp二次封装request API

小水龙-冲冲冲

已于 2022-08-29 17:44:34 修改

阅读量553

点赞数 2

分类专栏： vue 前端 uniapp 文章标签： uni-app javascript 前端

于 2022-08-29 17:40:52 首次发布

本文链接：https://blog.csdn.net/weixin_45797900/article/details/126589362

版权

前端同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

uniapp

3 篇文章 0 订阅

订阅专栏

1.根目录新建plugins文件夹，下面新建request.js文件。

2.复制代码到文件里面。



export const BASE_URL = ''; //测试地址
const HEADER = {
    'content-type': "application/json"
}; 


export function request({ url, data, method, header }) {
    let headerObj = HEADER;
    // 在登录页面保存token，在这里添加token到请求头中。 
    /* const token = uni.getStorageSync('userToken');
    if (token) {
        headerObj = {
            'Authorization': token,
            ...HEADER
        }
    } */
    return new Promise((resolve, reject) => {
        //uni.app 发起网络请求
        uni.request({
            url: BASE_URL + url,
            data,
            method,
            header: headerObj,
            sslVerify: true,
            success: ({
                data,
                statusCode,
                header
            }) => {
                if (data.code == 0) {
                    //请求成功
                    resolve(data)
                } else {
                    //请求失败 提示用户
                    uni.showToast({
                        title: data.message,
                        icon: "error",
                        mask: true,
                        duration: 2000
                    });
                    //进行失败回调
                    reject(data.message);
                }
            },
            fail: (errot) => {
                //请求错误 直接进行错误回调
                reject(errot);
            }
        })
    }).catch(err=>{
        console.log(err)
    })
}

3.根目录新建api文件夹。

import { request, BASE_URL } from "../plugins/request"

// 正常使用
export function login(params) {
  return request({
    url: '/borrowUser/login',
    data: params,
    method: 'post',
    header: 'application/json'
  })
}


// 封装上传图片
export function uploadFilePromise(url) {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: BASE_URL + "/third/uploadImageToOss",
      filePath: url,
      name: "file",
      formData: {
        user: "test",
      },
      success: (res) => {
        resolve(res.data);
      }
    });
  });
}

4.页面中使用，返回的是poromise。

<script>
// 引入
import { login } from "@/api/index";
export default {
  data() {
        async login(){
            let sign = {
                phone: 'xxx',
                code: 'xxx'
            }
            const res = await login(sign);
        }
    }
};
</script>