uniapp 使用luch-request 發送網絡請求

第一步:導入luch-request包



第二步:創建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})
   }
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章