axios

1、先创建一个services文件夹，创建request.js文件;

一、创建文件 request.js

• request.js

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
  // 初始化请求配置
  uni.$u.http.setConfig((config) => {
      /* config 为默认全局配置*/
      //域名前缀

      //#ifdef H5
      config.baseURL = '/api';
      //#endif

      //#ifdef MP-WEIXIN || APP-PLUS
      config.baseURL = 'http://tp6.lyqing.cn/api';
      //#endif

      //请求头
      config.header = {
        'X-Requested-With': 'XMLHttpRequest'
      }

      return config
  })

// 请求拦截
uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
    // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
    config.data = config.data || {}
  // 根据custom参数中配置的是否需要token，添加对应的请求头
  // if(config?.custom?.auth) {
  //     // 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
  //     config.header.token = vm.$store.state.userInfo.token
  // }
    return config 
}, config => { // 可使用async await 做异步操作
    return Promise.reject(config)
})

// 响应拦截
uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
  const data = response.data

  // 自定义参数
  // const custom = response.config?.custom
  // if (data.code !== 200) { 
  //     // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
  //     if (custom.toast !== false) {
  //         uni.$u.toast(data.message)
  //     }

  //     // 如果需要catch返回，则进行reject
  //     if (custom?.catch) {
  //         return Promise.reject(data)
  //     } else {
  //         // 否则返回一个pending中的promise，请求不会进入catch中
  //         return new Promise(() => { })
  //     }
  // }
  return data === undefined ? {} : data
}, (response) => { 
  // 对响应错误做点什么 （statusCode !== 200）
  return Promise.reject(response)
})
}

二、总入口文件夹api，创建index.js文件

• index.js

//默认引入模块
const files = require.context('./',true,/index.js$/)
const modules = {}

files.keys().forEach(key => {
    if (key === './index.js') return

    const item = files(key).default

    var mod = {}

    //替换路径
    var name = key.replace(/\.\/(.*)\/index.js/, "$1")

    mod[name] = item

    Object.assign(modules, mod)
})

const install = (Vue, vm) => {
    //加载模块
    modules

    //循环组合接口API
    let api = {}

    for(let ModeName in modules) 
    {
        if(JSON.stringify(modules[ModeName]) == "{}")
        {
            continue
        }

        for(let ApiName in modules[ModeName]) 
        {
            let config = modules[ModeName][ApiName]
            config.name = ApiName

            if(!config.name || !config.url)
            {
                continue
            }

            if(!api[ModeName])
            {
                api[ModeName] = {}
            }

            switch(config.method.toUpperCase())
            {
                case "GET":
                    api[ModeName][config.name] = (data = {}) => {
                        return uni.$u.http.get(config.url,data)
                    }
                    break
                case "POST":
                    api[ModeName][config.name] = (data = {}) => {
                        return uni.$u.http.post(config.url,data)
                    }
                    break
                case "UPLOAD":
                    api[ModeName][config.name] = (data = {}) => {
                        if(data.filePath)
                        {
                            return uni.$u.http.upload(config.url,data)
                        }else
                        {
                            return uni.$u.http.post(config.url,data)
                        }

                    }
                    break
            }
        }
    }

    vm.$u.api = api
}

export default {
    install
}

三、每个独立接口模块下面的index.js

• src/api/user/index.js

const files = require.context('.', false, /\.js$/)
const list = {}

files.keys().forEach(key => {
  if (key === './index.js') return
  const item = files(key).default
  Object.assign(list, item)
})

export default list

四、其他的接口文件

• src/api/user/base.js

export default {
  login: {
    url: 'user/auth/login',
    method: 'POST'
  },
  bind: {
    url: 'user/auth/bind',
    method: 'POST'
  },
  profile: {
    url: 'user/auth/profile',
    method: 'UPLOAD'
  }
}

五、在main.js里面引入

// 引入请求封装，将app参数传递到配置中
require('services/request.js')(app)

//引入接口
import api from '@/api/index.js'
Vue.use(api, app)

六、页面调用

<script>
       async addressInex(){
        let result = await this.$u.api.user.bind(this.bind)
        if(result.code == 1)
        {
            uni.setStorageSync('LoginUser', result.data);
            this.$refs.uToast.show({
                type: 'success',
                message: result.msg
            })
            uni.switchTab({
                url: '/pages/user/index'
            });
        } else {
            this.$refs.uToast.show({
                type: 'error',
                message: result.msg
            })
        }

    }
 </script>