uniapp笔记（一）：封装request

第一种

utils文件夹下新建request.js文件

// 配置文件引入请求网址
import {HTTP_BASE_URL,HEADER} from '@/config/app.js'

/**
 * @param url     :String 请求路径
 * @param method  :String 请求方式
 * @param data    :Object 请求数据
 */
function request (url,method,data) {
  
  //这里根据自己的需要，做一些拦截，登录状态判断等
  
  // code{.......}
  
  // 发送请求
  return new Promise((resolve,reject)=>{
    uni.request({
      url: HTTP_BASE_URL + url,
      data: data || {},
      method: method || 'GET',
      success: (res)=>{
        // 根据后端约定的返回状态码，进行对应业务处理
        let code = res.data.code;
        switch(code){
          case '100':
            reject();
            break;
          case '200':
            resolve();
            break;
        }
        resolve("成功")
      },
      fail: (res) => {
        reject('失败')
      }
    })
  })
}
// 这个是看crmeb的源码,把request方法进行二次封装，把不同的请求方式赋值给了http对象的属性，
 //后续就可以利用http.get或者http.post直接调用
const http = {};

['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
  http[method] = (url, data) => request(url, method, data)
});

export default http;

// 配置文件引入请求网址
import {HTTP_BASE_URL,HEADER} from '@/config/app.js'

/**
 * @param url     :String 请求路径
 * @param method  :String 请求方式
 * @param data    :Object 请求数据
 */
function request (url,method,data) {
  
  //这里根据自己的需要，做一些拦截，登录状态判断等
  
  // code{.......}
  
  // 发送请求
  return new Promise((resolve,reject)=>{
    uni.request({
      url: HTTP_BASE_URL + url,
      data: data || {},
      method: method || 'GET',
      success: (res)=>{
        // 根据后端约定的返回状态码，进行对应业务处理
        let code = res.data.code;
        switch(code){
          case '100':
            reject();
            break;
          case '200':
            resolve();
            break;
        }
        resolve("成功")
      },
      fail: (res) => {
        reject('失败')
      }
    })
  })
}
// 这个是看crmeb的源码,把request方法进行二次封装，把不同的请求方式赋值给了http对象的属性，
 //后续就可以利用http.get或者http.post直接调用
const http = {};

['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
  http[method] = (url, data) => request(url, method, data)
});

export default http;

新建api目录，目录下新建home.js文件，统一存放首页请求

import http from '@/utils/request.js'

//首页banner的请求
export function getBanner(){
  return http.get('请求路径','请求方式，可以不写，默认get',{请求数据也可以不写，默认空object})
}
// 首页菜单请求

// ...

import http from '@/utils/request.js'

//首页banner的请求
export function getBanner(){
  return http.get('请求路径','请求方式，可以不写，默认get',{请求数据也可以不写，默认空object})
}
// 首页菜单请求

// ...

首页调用

import {getBanner} from '@/api/home.js'

onLoad() {
    getBanner().then(res=>{
      console.log(res)
    })
 }

import {getBanner} from '@/api/home.js'

onLoad() {
    getBanner().then(res=>{
      console.log(res)
    })
 }

第二种

utils文件夹下新建request.js文件

// 配置文件引入请求网址和头部
import {HTTP_BASE_URL,HEADER} from '@/config/app.js'

/**
 * @param options :Object {url,method,data}
 */
 function request (option){ 

  
  //这里根据自己的需要，做一些拦截，登录状态判断等
  
  // code{.......}
  
  // 发送请求
  return new Promise((resolve,reject)=>{
    uni.request({
      url: HTTP_BASE_URL + options.url,
      data: options.data || {},
      method: options.method || 'GET',
      success: (res)=>{
        // 根据后端约定的返回状态码，进行对应业务处理
        let code = res.data.code;
        switch(code){
          case '100':
            reject();
            break;
          case '200':
            resolve();
            break;
        }
        resolve("成功")
      },
      fail: (res) => {
        reject('失败')
      }
    })
  })
}

export default request;

// 配置文件引入请求网址和头部
import {HTTP_BASE_URL,HEADER} from '@/config/app.js'

/**
 * @param options :Object {url,method,data}
 */
 function request (option){ 

  
  //这里根据自己的需要，做一些拦截，登录状态判断等
  
  // code{.......}
  
  // 发送请求
  return new Promise((resolve,reject)=>{
    uni.request({
      url: HTTP_BASE_URL + options.url,
      data: options.data || {},
      method: options.method || 'GET',
      success: (res)=>{
        // 根据后端约定的返回状态码，进行对应业务处理
        let code = res.data.code;
        switch(code){
          case '100':
            reject();
            break;
          case '200':
            resolve();
            break;
        }
        resolve("成功")
      },
      fail: (res) => {
        reject('失败')
      }
    })
  })
}

export default request;

新建api目录，目录下新建home.js文件，统一存放首页请求

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

//首页banner的请求
export function getBanner(){
  return request({
    url: url,//必须填写
    methods: 'POST'.//可不写，默认get
    data: {},//可不写，默认{}
  })
}
// 首页菜单请求

// ...

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

//首页banner的请求
export function getBanner(){
  return request({
    url: url,//必须填写
    methods: 'POST'.//可不写，默认get
    data: {},//可不写，默认{}
  })
}
// 首页菜单请求

// ...

首页调用，两种都一样

import {getBanner} from '@/api/home.js'

onLoad() {
    getBanner().then(res=>{
      console.log(res)
    })
 }

import {getBanner} from '@/api/home.js'

onLoad() {
    getBanner().then(res=>{
      console.log(res)
    })
 }

本文到此结束。

反馈信息

INFO

邮箱： open_teams@163.com

uniapp笔记（一）：封装request ​

反馈信息 ​

uniapp笔记（一）：封装request

反馈信息