uni-app网络请求封装

1.  
   <script>
2.  
   // 封装请求函数
3.  
   let ajaxTimes = 0;
4.  
   export default {
5.  
   globalData: {
6.  
   //全局开发者服务器接口地址，一般有开发地址以及生产地址，接口地址有多个可以切换使用
7.  
   requesturl: 'http://xxx.xxx.x.xxx:xxxx',
8.  
   // requesturl: 'http://xx.xxx.xxx.xx/prod-api/',
9.  
    
10.  
     
11.  
    //假数据模拟接口
12.  
    // requesturl: 'https://mock.apipost.cn/app/mock/project/xxx/',
13.  
     
14.  
    /**发起网络请求。
15.  
    * @param {开发者服务器接口地址} url
16.  
    * @param {请求的参数} data
17.  
    * @param {必须大写，有效值在不同平台差异说明不同} method
18.  
    * @param {收到开发者服务器成功返回的回调函数} callback
19.  
    */
20.  
    // 全局请求函数
21.  
    global_request: (url, data, method, flag) => {
22.  
    // 保存当前this
23.  
    let that = this;
24.  
    // 配置请求头
25.  
    var header = {
26.  
    'Content-Type': flag ? 'application/x-www-form-urlencoded' : 'application/json'
27.  
    };
28.  
    // 如果从本地存储得到有token,请求的时候加上token
29.  
    if (uni.getStorageSync('wxuser')) {
30.  
    //! 请求参数加入token值
31.  
    header.authorization = uni.getStorageSync('wxuser').token.access_token;
32.  
    }
33.  
     
34.  
    ajaxTimes ;
35.  
    // 显示加载中 效果
36.  
    uni.showLoading({
37.  
    title: "加载中",
38.  
    });
39.  
    /**
40.  
    * 使用Promise的方式解决回调问题
41.  
    * 调用这个函数后返回一个promise
42.  
    * resolve方法接收成功回调
43.  
    * reject方法接收错误
44.  
    * 在外部可以使用调用时 可使用async await
45.  
    * */
46.  
    return new Promise((resolve, reject) => {
47.  
    // 使用uniapp自带的请求函数
48.  
    uni.request({
49.  
    // 判断url的地址是否含有:引号,如果有就是有http://xxxxx的地址使用这个地址,如果没有就是这里配置的基础地址加上传输过来的地址拼接
50.  
    url: url.split(':')[0] == 'http' ? url : getApp().globalData.requesturl url,
51.  
    // 传输的data
52.  
    data: data,
53.  
    // 头信息
54.  
    header: header,
55.  
    // 传输的方法
56.  
    method: method,
57.  
    // 解析传输回来的json格式为对象形式
58.  
    dataType: 'json',
59.  
    // 调用请求成功回调
60.  
    success: function(res) {
61.  
    if (res.data.code == 200) {
62.  
    resolve(res);
63.  
    } else if (res.data.code == 401) {
64.  
    uni.showToast({
65.  
    title: '登录已过期,请重新登录',
66.  
    icon: 'none',
67.  
    duration: 2000,
68.  
    success: function(res) {
69.  
    // 移除token
70.  
    uni.removeStorageSync('wxuser');
71.  
    }
72.  
    });
73.  
    setTimeout(() => {
74.  
    // 延时1s跳转到登录页面
75.  
    uni.navigateTo({
76.  
    url: '/subPackages/login/newPage'
77.  
    });
78.  
    }, 1000);
79.  
    } else if (res.data.code == 500) {
80.  
    uni.showToast({
81.  
    title: '服务器错误',
82.  
    icon: 'none',
83.  
    duration: 2000
84.  
    });
85.  
    } else {
86.  
    // 如果状态码不为200,400,500,调用global_Toast函数报错
87.  
    getApp().globalData.global_Toast(true, res.data.msg, function(
88.  
    res) {});
89.  
    }
90.  
    },
91.  
    // 请求失败回调
92.  
    fail: function(err) {
93.  
    uni.showToast({
94.  
    title: '网络错误，请稍后再试',
95.  
    icon: 'none',
96.  
    duration: 2000
97.  
    });
98.  
    },
99.  
    // 完成请求回调
100.  
     complete: () => {
101.  
     ajaxTimes--;
102.  
     if (ajaxTimes === 0) {
103.  
     // 关闭正在等待的图标
104.  
     uni.hideLoading();
105.  
     }
106.  
     }
107.  
     });
108.  
     });
109.  
     },
110.  
      
111.  
     /**保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
112.  
     * @param {需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数} url
113.  
     * @param {接口调用成功的回调函数} callback
114.  
     */
115.  
     global_navigateTo: function(url, callback) {
116.  
     uni.navigateTo({
117.  
     url: url,
118.  
     success: function(res) {
119.  
     callback(res);
120.  
     }
121.  
     });
122.  
     },
123.  
      
124.  
     /**显示/隐藏消息提示框
125.  
     * @param {flag：显示消息提示框 ！flag：隐藏消息提示框} flag
126.  
     * @param {提示的内容，长度与 icon 取值有关} title
127.  
     * @param {接口调用成功的回调函数} callbcak
128.  
     */
129.  
     global_Toast: function(flag, title, callbcak) {
130.  
     if (flag) {
131.  
     uni.showToast({
132.  
     title: title,
133.  
     icon: 'none',
134.  
     duration: 5000,
135.  
     success: function(res) {
136.  
     callbcak(res);
137.  
     }
138.  
     });
139.  
     } else {
140.  
     uni.hideToast();
141.  
     }
142.  
     }
143.  
     }
144.  
     };
145.  
     </script>

在app.vue当中封装上面的那段代码

我们可以创建一个专门存放api的文件夹，文件夹当中可以存放多个文件夹来存放各个模块的请求接口

例我们创建一个netowork或者api文件夹，文件夹当中创建一个login文件夹，文件夹再存放login.js文件存放接口

1.  
   /**
2.  
   * ! 用户的登陆接口 以及注册接口
3.  
   */
4.  
   // 引入app组件当中封装的网络请求接口函数
5.  
   const {
6.  
   global_request
7.  
   } = getApp().globalData;
8.  
    
9.  
   /**
10.  
    * 用户登录
11.  
    * @param {openid}
12.  
    */
13.  
    // 参数携带在路径身上
14.  
    const loginByAuth = (openid) => {
15.  
    return global_request('/xxx/xxx/xxxx/' openid, null, 'GET');
16.  
    }
17.  
     
18.  
    /**
19.  
    * 用户注册接口
20.  
    */
21.  
    // 参数为data
22.  
    const register = (data) => {
23.  
    return global_request('/xxxx/xxxx/xxxxx', data, 'POST');
24.  
    }
25.  
    // 暴露接口
26.  
    module.exports = {
27.  
    loginByAuth,
28.  
    register,
29.  
    }

组件调用接口发起网络请求

1.  
   <script>
2.  
   import {
3.  
   loginByAuth
4.  
   } from '../../network/login/login.js';
5.  
   export default {
6.  
   data() {
7.  
   return {
8.  
   openid : 'xxx'
9.  
    
10.  
    }
11.  
    },
12.  
    methods: {
13.  
    //使用接口
14.  
    async login(){
15.  
    let res = await loginByAuth(openid);
16.  
    }
17.  
     
18.  
    }
19.  
     
20.  
    }
21.  
    </script>

关于app.vue的globaldata说明https://uniapp.dcloud.net.cn/collocation/App.html#globaldata

这篇好文章是转载于：学新通技术网