zoukankan      html  css  js  c++  java
  • vue-ajax/axios请求函数封装: axios+promise

    项目文件目录/src/api

    ajax.js

    /**
     * ajax 请求函数模块
     * 返回值为promise对象
     */
    import axios from 'axios'
    export default function ajax (url, data = {}, type = 'GET') {
      return new Promise((resolve, reject) => {
        let promise
        if (type === 'GET') {
        // 准备url query 参数数据
          let dataStr = '' // 数据拼接字符串
          Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&'
          })
          if (dataStr !== '') {
            dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
            url = url + '?' + dataStr
          }
          // 发送get 请求
          promise = axios.get(url)
        } else {
        // 发送post 请求
          promise = axios.post(url, data)
        }
        promise.then(response => {
          resolve(response.data)
        })
          .catch(error => {
            reject(error)
          })
      })
    }
    
    

    index.js

    举例:接口请求函数封装: 每个后台

    /**
     * 包含n个接口函数的模块
     * 返回值为promise对象
     *
     * 1、根据经纬度获取位置详情
     * 2、获取食品分类列表
     * 3、根据经纬度获取商铺列表
     * 4、根据经纬度和关键字搜索商铺列表
     * 5、获取一次性验证码
     * 6、用户名密码登陆
     * 7、发送短信验证码
     * 8、手机号验证码登陆
     * 9、根据会话获取用户信息
     * 10、用户登出
     */
    import ajax from './ajax'
    
    // 1、根据经纬度获取位置详情
    export const reqAddress = (geohash) => ajax(`/position/${geohash}`)
    
    // 2、获取食品分类列表
    export const reqFoodTypes = () => ajax('/index_category')
    
    // 3、根据经纬度获取商铺列表
    export const reqShops = (latitude, longitude) => ajax('/shops', {
      latitude,
      longitude
    })
    
    // 4、根据经纬度和关键字搜索商铺列表
    export const reqShopsSearch = (geohash, keyword) => ajax('/search_shops', {
      geohash,
      keyword
    })
    
    // 5、获取一次性验证码
    export const reqCaptcha = () => ajax('/captcha')
    
    // 6、用户名密码登陆
    export const reqPwdLogin = (name, pwd, captcha) => ajax('/api/login_pwd', {
      name,
      pwd,
      captcha
    }, 'POST')
    
    // 7、发送短信验证码
    export const reqSendCode = phone => ajax('/api/sendcode', {
      phone
    })
    
    // 8、手机号验证码登陆
    export const reqSmsLogin = (phone, code) => ajax('/api/login_sms', {
      phone,
      code
    }, 'POST')
    
    // 9、根据会话获取用户信息
    export const reqUser = () => ajax('/api/userinfo')
    
    // 10、用户登出
    export const reqLogout = () => ajax('/api/logout')
    
    
  • 相关阅读:
    利用兼容DC和兼容位图实现图形重绘
    MFC实现文件打开和保存功能实现
    CFile文件操作示例
    利用互斥对象实现线程同步的实例说明
    bootstrap3 input 验证样式【转】
    js event 冒泡和捕获事件详细介绍【转】
    Html+Ajax+Springmvc+Mybatis,不用JSP【转】
    hp电脑重装win7 64位 后 所有软件都装不上问题【转】
    bootstrap 模态 modal 小例子【转】
    servlet 获取 post body 体用流读取为空的问题【转】
  • 原文地址:https://www.cnblogs.com/izhaong/p/12154304.html
Copyright © 2011-2022 走看看