uni-app小程序配置网络环境加基地址

由于平台的限制,小程序项目中不支持 axios

  • 而且原生的 `wx.request()` API 功能较为简单,

   不支持拦截器,等全局定制的功能
1,建议在 uni-app 项目中使用 `@escook/request-miniprogram` 第三方包发起网络数据请求。
2,请参考 **@escook/request-miniprogram** 的官方文档进行安装、配置、使用
      官方文档:官方文档

步骤:

1,打开项目所在的目录,进行初始化:npm init -y

2,再下载第三方包:npm i @escook/request-miniprogram(如果你是用Hbuilder开发就打开项目的文件夹然后在文件地址那里 输入cmd 在里面下载)

创建一个根目录下的utils文件 然后在里面创建一个文件 http.js

这一步结束后  就去main.js中 全局导入   import './utils/http.js'


// 封装网络请求的方法
import {
  $http
} from '@escook/request-miniprogram'

// 设置基地址
$http.baseUrl = '基地址'                          ------基地址

// 设置拦截器
// 请求拦截器
$http.beforeRequest = function() {
  // 添加提示信息
  uni.showLoading({
    title: '数据加载中...'
  })
}

// 响应拦截器
$http.afterRequest = function() {
  // 关闭提示信息
  uni.hideLoading()
}

// 挂载到全局(uni-app 中的全局对象建议大家使用 uni)
uni.$http = $http
// 暴露方法
export default $http

3,

在main.js中导入文件

import './utils/http.js'

4,使用方法·:  

uni.$http.请求方式('请求地址')

async getSwiperList() {
        const {
          data: {
            message,
            meta
          }
        } = await uni.$http.get('/home/swiperdata')
        if (meta.status !== 200) return uni.$showMsg()
        // 保存数据
        this.swiperList = message
      },

猜你喜欢

转载自blog.csdn.net/weixin_57127914/article/details/130755006