uniapp 封装请求

根目录下新建 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}

然后，在页需要的组件中使用这些请求方法：

<template>  <view>    这里是用户信息: {{userInfo}}  </view></template>
<script>  // 导入需要的方法 例如这里需要 获取用户信息   // 所以导入的是 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        })      }    }  }</script>
<style></style>

如果有传参：

<template>  <view>    这里是列表信息: {{list}}  </view></template>
<script>  // 导入需要的方法   import {getList} from '@/util/api.js'  export default {    data() {      return {        list:''      }    },    onShow(){      this.lists()    },    methods: {      // 调用获取列表信息      lists(){        getList({type: 1}).then(res=>{          console.log('列表信息',res);          this.list= res.data        })      }    }  }</script>
<style></style>

365700uniapp 封装请求

uniapp 封装请求

文章评论