uniapp 封装请求

老K博客

发布于 2024-04-26 10:33:59

1200

发布于 2024-04-26 10:33:59

文章被收录于专栏：老K博客老K博客

根目录下新建 util文件夹：

里面两个js文件：request.js 和 api.js

接下来开始cv：

打开request.js 拷贝：

// 请求接口 换成你自己的 （仅为示例 非真实接口）
const commoneUrl = "http://test.cn/api/";

//get请求封装
function getRequest(url, data) {
  var promise = new Promise((resolve, reject) => {
    var postData = data;
    uni.request({
      url: commoneUrl + url,
      data: postData,
      method: "GET",
      dataType: 'json',
      header: {
        'content-type': 'application/json',
        token: uni.getStorageSync('token') || ''
      },
      success: function(res) {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          resolve(res.data)
        }
      },
      error: function(e) {
        reject('网络出错');
      }
    });
  });
  return promise;
}
//post请求封装
function postRequest(url, data) {
  var promise = new Promise((resolve, reject) => {
    var postData = data;
    uni.request({
      url: commoneUrl + url,
      data: postData,
      method: 'POST',

      header: {
        'content-type': 'application/json',
        token: uni.getStorageSync('token') || ''
      },
      success: function(res) {
        if (res.code === 200 && res.code == 0) {
          resolve(res.data);
        } else {
          resolve(res.data)
        }
      },
      error: function(e) {
        reject('网络出错');
      }
    })
  });
  return promise;
}
module.exports = {
  postRequest,
  getRequest
}

然后打开 api.js 拷贝：

// 导入上面封装的请求
const request = require('../util/reuqest.js') 

// 获取用户信息的请求方法 get类型
var getUser = function(){
  return request.getRequest('user');   //user---接口名称
}

// 获取列表的请求方法 post类型
var getList = function(){
  return request.postRequest('list');   //list---接口名称
}

// 导出所有的请求方法（与上面的函数名称对应）  以便在其他组件使用此请求方法
module.exports = {
  getUser,
  getList
}

使用请求方法：

  // 导入需要的方法 例如这里需要 获取用户信息 
  // 所以导入的是 getUser方法 导入名称与api里面导出的一致
  import {getUser} from '@/util/api.js'
  export default {
    data() {
      return {
        userInfo:''
      }
    },
    onShow(){
      this.userInfo()
    },
    methods: {
      // 调用获取用户信息
      userInfo(){
        getUser().then(res=>{
          console.log('用户信息',res);
          this.userInfo = res.data
        })
      }
    }
  }