UniApp：uniapp的接口封装（二）

1. 新建 https 文件夹存放以下文件
   

   • baseUrl.js
   • apis.js
   • request.js
   • http.js

2. baseUrl.js

   //存放主站域名
   const BASE_URL = 'http://www.ceshi.com'
   
   export {
   	BASE_URL
   }
   

3. apis.js

   //导入API地址
   import { BASE_URL } from '@/https/baseUrl.js'
   
   //常用API
   class Apis {
   	API_URL = BASE_URL
   	//获取用户信息
   	getUserInfo = `${this.API_URL}/userInfo/api`
   }
   
   const apis = new Apis()  //细分版块
   
   export {
   	apis
   }
   

4. request.js

   //请求头
   const header = {
   	'Content-type': 'Application/json',
   	'Token':uni.getStorageSync('token').AccessToken
   }
   
   //生成请求方法
   const request = (url,data,method) => {
   	return new Promise((resolve, reject) => {
   	    uni.request({
   	        url: url,
   	        data: data,
   	        header: header,
   	        method: method,
   	        success: res => {
   	            resolve(res)
   	        },
   	        fail: err => {
   	            reject(err);
   	        }
   	    })
   	})
   }
   
   //创建HTTP对象，分化请求
   class Http {
   	get = function(url,data){
   		return request(url,data,'GET')
   	}
   	post = function(url,data){
   		return request(url,data,'POST')
   	}
   }
   
   //实例化对象
   const http = new Http()
   
   //导出http对象
   export{
   	http
   }
   

5. http.js

   import { http } from '@/https/request.js'
   import { apis } from '@/https/apis.js'
   
   // 获取用户信息
   const getUserInfo = (data) => {
       return http.get(apis.getUserInfo, data)
   }
   
   
   //进行引入
   export default{
   	getUserInfo 
   }
   

6. main.js

   //导入全局请求
   import http from '@/https/http.js';
   Vue.prototype.$http = http;
   

7. 使用

   export default {
       data() {
           return {
              
           }
       },
       onLoad() {
           this.getUserInfo();
       },
       methods: {
           getUserInfo(){
               this.$http.getUserInfo().then(res => {
                   console.log(res.data);
               });
           }
       }
   }