luch-request 在uniapp项目中的使用

luch-request

基于Promise开发的跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力

1. 我是在插件市场导入的：luch-request - DCloud 插件市场

也可以 npm 安装

执行命令

npm init -y // 项目内有 package.json 文件可以忽略这个命令
npm i luch-request -S

2. 在根目录下新建 utils 文件夹并创建自定义文件 request.js 文件

import Request from "../js_sdk/luch-request/luch-request/index.js" 
                                   // 导入的文件路径可能跟我不一样
import Request from 'luch-request' // 自己注意也可以写成这种

// 下面这些可以直接复制  已经精简了 再删下去该报错了

const http = new Request ({
  baseURL: "", // 你的基地址
  timeout: 5000, // 响应时间为5秒
})

// 请求拦截器
http.interceptors.request.use(config => {
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
http.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.reject(new Error(error))
})

export default http

 3. 在根目录下创建 api 文件夹并创建 index.js文件

import request from '../utils/request.js'
// 这是我的路径  注意自己的路径

export default {
  getData(url, data) {
    return request.get( url, {params: data})
  },

  postData(url, data) {
    return request.post(url, data)
  },

  putData(url, data){
    return request.put(url, data)
  },

  deleteData(url, data){
    return request.delete(url, data)
  }
}

4. 页面中的使用

<script>
  import api from '@/api/index.js'

  export default {

    data() {
      return {
        swiperList: []
      };
    },

    onLoad() {
      this.getSwiperList()
    },

    methods:{
       async getSwiperList() {
         this.swiperList = await api.getData('/home/swiperdata') 
        // 注意地址跟我的不一样 你得改嗷
      }
    }
  }
</script>

参考文章：luch-request使用方法_想搞全栈的前端小白的博客-CSDN博客