uniapp 接口封装请求

1.封装地址，在config.js

const ENV = 'TEST';

const config = {
  'TEST': {
    appId: 'wx111',
    AppSecret: '111,
    qqMapKey: '111',
    requestUrl: 'https://test.com/'
  },
  'PRODUCTION': {
    appId: 'wx111',
    AppSecret: '111',
    qqMapKey: '111',
    requestUrl: 'https://111.com/'
  }
}

export default config[ENV]

封装request请求，在api/request.js 

import config from '@/config'
import { getToken } from '@/utils/auth';

function request(config) {
    if(config.header) {
        config.header.token = getToken()
    } else {
        config.header = { 
            token: getToken()
        }
    }
    return new Promise((reslove, reject) => {
        uni.request(Object.assign(config, {
            success: res => {
                console.log(config,res); //config传后台，res接收的数据
                const { statusCode, data } = res
                if (statusCode == 200) {
                    if(data.success) {
                      reslove(data)
                    } else {
                      reject(data)
                    }
                } else if (statusCode == 401) {
                    // 已登录状态下，token过期则redirect到登录页
                    if(uni.getStorageSync('LOGGED_IN')) {
                        uni.setStorageSync('LOGGED_IN', false);
                        uni.showToast({
                            title: '账户登录已过期，请重新登录!',
                            icon: 'none'
                        })
                        uni.redirectTo({
                            url: '/pages/login/index'
                        });
                        reject({});
                    }
                } else {
                    reject(data)
                }
            },
            fail: err => {
                reject(err)
            }
        }))
    })
}

const api = function (method, api, data) {
    return request({
        method,
        url: config.requestUrl + api,
        data
    });
}

export default api;

使用

api/list.js

import request from './request.js'

// 获取列表
export function list(data) {
  return request('get', 'api/list', data)
}
组件

           list({id: this.userId}).then(res => {
                    ...
                })

或

1.封装request请求，在utils/request.js

const request = (options)=>{
    return new Promise((resolve,reject)=>{
        uni.request({
            url:options,
            method:options.method || 'GET',

           // header: {
             //    'content-type': 'application/json;charset=UTF-8',
              //   'Authorization':uni.getStorageSync("appToken")
           //  },

            data:options.data || {},
            success:(res)=>{
               //  if (res.data.status !== 0) { //请求失败
               //      return uni.showToast({
                    //     title: '获取数据失败'
                  //   })
               //  }
                resolve(res) //数据请求成功
            },
            fail: (err) => {
                uni.showToast({
                    title: '请求接口失败'
                })
                reject(err) //数据请求失败
            }
        })
    })
}
export{
    request
}

2.封装接口，在utils/api.js

const BASE_URL = "https://getman.cn/mock/"

//接口
const getMemberUrl = `${BASE_URL}hh`

export default request

3.min.js 定义request请求

import request from './utils/request.js'
Vue.prototype.$request = request;

4.页面使用接口

    import {getMemberUrl} from '../../util/api.js'

   法一：
    async getMemberMsg() {
        const res = await this.$request(getMemberUrl)
        console.log('数据：',res)
    },   
法二：
add() {
                this.$request(getMemberUrl).then((res) => {
                    console.log(res)
                }).catch((err) => {
                    console.log(err)
                })
            }

或者

1.封装../../util/request.js

const request = (options) => {
    return new Promise((resolve, reject) => {
        uni.request({
                url: options,
                method: options.method || 'GET',
                data: options.data || {}
            })
            .then((res) => {
                resolve(res) //数据请求成功
            })
            .catch((err) => {
                uni.showToast({
                    title: '请求接口失败'
                })
                reject(err) //数据请求失败
            })
    })
}
export default request

 2.接口../../util/api.js

const BASE_URL = "https://getman.cn/mock/"

//接口
const getMemberUrl = `${BASE_URL}hh`

export{
    getMemberUrl
}

3.min.js 定义request请求

import request from './utils/request.js'
Vue.prototype.$request = request;

4.使用

        import {getMemberUrl} from '../../utils/api.js'

    getMeg(){
              this.$request(getMemberUrl).then((res) => {
                    console.log(res)
                }).catch((err) => {
                    console.log(err)
                })
       }

或者

1.../../util/request.js

//默认地址前缀
var apiServerAddr = 'http://127.0.0.1:8082'
//videos接口
const API_VIDEOS = apiServerAddr + '/api/getnew/';
function APP_POST(url, opt) {
    // var loadMsg = "获取数据中..."
    // wx.showLoading({ title: loadMsg, mask: true })
    return new Promise((resolve, reject) => {
        uni.request({
            url: url,
            data: opt,
            method: 'POST',
            header: {
                'content-type': 'application/json;charset=UTF-8',
                'Authorization':uni.getStorageSync("appToken")
            },
            success: (result) => {
                // wx.hideLoading()
                resolve(result)
            },
            fail: (err) => {
                // wx.hideLoading()
                reject(err)
            }
        });
    })
}

function APP_POST_NOTTOKEN(url,opt){
    // var loadMsg = "获取数据中..."
    // wx.showLoading({ title: loadMsg, mask: true })
    return new Promise((resolve,reject)=>{
        uni.request({
            url: url,
            data: opt,
            method: 'POST',
            header: {
                'content-type':'application/json;charset=UTF-8',
            },
            success: (result) => {
                // wx.hideLoading()
                resolve(result)
            },
            fail: (err) => {
                // wx.hideLoading()
                reject(err)
            }
        });
    })
}

function APP_GET(url) {
    // var loadMsg = "获取数据中..."
    // wx.showLoading({ title: loadMsg, mask: true })
    return new Promise((resolve, reject) => {
        uni.request({
            url: url,
            method: 'GET',
            header: {
                'content-type': 'application/json;charset=UTF-8',
                'Authorization':uni.getStorageSync("appToken")

            },
            success: (result) => {
                // wx.hideLoading()
                resolve(result)
            },
            fail: (err) => {
                // wx.hideLoading()
                reject(err)
            }
        });
    })
}
module.exports = {
    APP_POST,
    APP_GET,
    APP_POST_NOTTOKEN,
    API_VIDEOS
}

2.使用

        var requestUtil = require('../../util/request.js')

    getSwiper() {
                this.requestUtil.APP_GET(this.requestUtil.API_VIDEOS+13).then(res=>{
                    console.log(res)
                    this.message=res.data.message[0]
                })
            },