uniapp封装http请求

一、目录结构

uniapp封装http请求_第1张图片

二、env.js

let BASE_URL
let dev_url = '1'
//开发环境中
if (dev_url === '1') {
  // 开发环境
  BASE_URL = 'http://192.168.120.22:9999'  //开发环境请求地址
} else {
  // 生产环境
  BASE_URL = 'https://xxxx'  //生成环境请求地址
}

export default BASE_URL

三、request.js

import BASE_URL from '@/utils/env.js' //引入接口共用地址
export const request = (options) => {
  return new Promise((resolve, reject) => {

    // ⭐在发送请求之前执行拦截操作
    uni.request({
      url: BASE_URL + options.url, //接收请求的API
      method: options.method || 'GET', //接收请求的方式,如果不传默认为GET
      data: options.data || {}, //接收请求的data,不传默认为空
      success(res) {

        resolve(res.data) // 使用resolve将数据传递出去
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

四、api.js

import { request } from '@/utils/request.js' //导入封装好的js文件

//登录  post请求
export const login = (data)=>{

  return request({
    url:'/api/getFuelcon',
    method:'GET',
    data:data
  })
}

export const info= (data)=>{

  return request({
    url:'/api/info',
    method:'GET',
    data:data
  })
}

五、使用

import { login } from '@/utils/api.js'
		methods: {
			async test(){
				let res = await login()
				console.log('res', res)
			}
		}

你可能感兴趣的:(uni-app,http,网络协议)