uniapp(网络请求以及接口封装)

1. 开发环境和生产环境

baseUrl.js 文件

var url = ""
 if(process.env.NODE_ENV === 'development'){ // 开发环境
     url =  "http://localhost"
 }else{ // 生产环境
     url = "http://leju.bufan.cloud"
 }
// 导出 url
export default url

2. 请求封装

request.js 文件

import baseUrl from "./baseUrl"

var request = function(config){
  return new Promise((resolve,rejected)=>{
    var setting = {
      url: baseUrl + config.url,
      method:config.method ? (config.method).toUpperCase() :  "GET",
      // method: (config.method).toUpperCase() || "GET",
      data:config.data,
      header:{
          token:uni.getStorageSync("leju_token") ? uni.getStorageSync("leju_token") : ""
      },
      timeout:50000,
      success(res){
        if(res.data.success == true){
                resolve(res.data);
        }else{
            if(res.data.code == 20002){
                uni.showModal({
                    title:"登录提示",
                    content:"登录异常，是否重新登录!",
                    success(result) {
                        if(result.confirm){
                            uni.navigateTo({
                                url:"/pages/user/login/login"
                            })
                        }else{
                             uni.showToast({
                                 title:"您取消了!"
                             })
                             rejected(res.data);
                        }
                    }
                })
            }else{
                uni.showToast({
                    title:res.data.message,
                    icon:"none"
                })
                rejected(res.data);
            }
        }
      },
      fail(res){
        rejected(res)
      }
    }
    uni.request(setting)
  })
};
export default request

点我查看官方 request API

3. 接口封装示例

3.1 获取首页轮播图数据

import request from '@/api/request.js'
// 1. 广告部分
function bannerList(data){
    return request({
        url: '/lejuClient/home/bannerAds',
        method: 'get',
        // data
    })
}
export {
    bannerList
}

3.2 获取分类数据

import request from '@/api/request.js'

// 乐居4个主分类
function findCategory(){
    return request({
        url:"/lejuClient/productCategory/findCategory/1308336521604599809"
    })
}
export {
    findCategory
}

3.3 获取商品详情数据

import request from '@/api/request.js'
// 获取商品详情数据
function productDetail(id){
    return request({
        url:`/lejuClient/product/productDetail/${id}`,
        method:"get"
    })
}
export {
    productDetail
}