美文网首页
uniapp 使用luch-request 发送网络请求

uniapp 使用luch-request 发送网络请求

作者: 挣扎在黑暗中的码畜 | 来源:发表于2021-03-12 09:07 被阅读0次

    第一步:导入luch-request包


    image.png

    第二步:创建common.js配置文件,并配置一下内容

    import Request from '@/js_sdk/luch-request/luch-request/index.js'
    export const apiBaseUrl = 'http://www.baidu.com'
    
    
    const api = new Request()
    const http = new Request()
    
    http.config.header = {website:'123dfdf465132'}
    api.config.header={website:'123dfdf465132'}
    
    /* 设置全局配置 */
    api.setConfig((config) => { 
      config.header = {...config.header,a: 1111111, b: 2222}
      return config
    })
    
    
    //请求前拦截,用来动态加参,例如token
    api.interceptors.request.use((config) => { // 可使用async await 做异步操作
      config.baseURL = apiBaseUrl
      config.header = {...config.header,token:"not setting"}
    
      // 演示custom 用处
      // if (config.custom.auth) {
      //   config.header.token = 'token'
      // }
      if (config.custom.loading) {
       uni.showLoading({
            title:"加载中..."
        })
      }
      /**
       /* 演示
       if (!token) { // 如果token不存在,return Promise.reject(config) 会取消本次请求
          return Promise.reject(config)
        }
       **/
      return config
    }, config => { // 可使用async await 做异步操作
      return Promise.reject(config)
    })
    
    
    // 请求后
    api.interceptors.response.use(async(response) => {
    //   console.log(response)
      if (response.config.custom.loading) {
        uni.hideLoading()
      }
      return response
    }, (response) => { /*  对响应错误做点什么 (statusCode !== 200)*/
    //   console.log(response)
    //   console.log(response.statusCode);
    //   //未登录时清空缓存跳转
    //   if(response.statusCode ==401){
    //    uni.clearStorageSync();
    //    uni.switchTab({
    //      url:"/pages/user/user"
    //    })
    //   }
      return Promise.reject(response)
    })
    
    
    export {http,api}
    

    第三步:创建接口文件 api/index.js

    import { http,api } from '@/config/common.js' // 全局挂载引入,配置相关在该common.js文件里修改
    
    export default {
        /**
         * @param {Object} url 接口地址
         * @param {Object} data 数据
         * @param {Object} loading 是否显示加载提示框
         */
        getData(url,data,loading) {
            return api.get(url,{custom: {loading: loading}}, {params: data});
        },
    }
    
    

    第四步:页面中使用

    import TestApi from "@/api/index.js";
    TestApi.getData(url,data,true).then(res=>{
       if(res.statusCode==200){
    
       }else{
           uni.showToast({icon:'none',title:res.errMsg})
       }
    })
    

    相关文章

      网友评论

          本文标题:uniapp 使用luch-request 发送网络请求

          本文链接:https://www.haomeiwen.com/subject/eciaqltx.html