第一步：導(dǎo)入luch-request包
image.png
第二步：創(chuàng)建common.js配置文件，并配置一下內(nèi)容
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'}
/* 設(shè)置全局配置 */
api.setConfig((config) => {
config.header = {...config.header,a: 1111111, b: 2222}
return config
})
//請求前攔截，用來動態(tài)加參,例如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) => { /* 對響應(yīng)錯誤做點什么 （statusCode !== 200）*/
// console.log(response)
// console.log(response.statusCode);
// //未登錄時清空緩存跳轉(zhuǎn)
// if(response.statusCode ==401){
// uni.clearStorageSync();
// uni.switchTab({
// url:"/pages/user/user"
// })
// }
return Promise.reject(response)
})
export {http,api}
第三步：創(chuàng)建接口文件 api/index.js
import { http,api } from '@/config/common.js' // 全局掛載引入从藤，配置相關(guān)在該common.js文件里修改
export default {
/**
* @param {Object} url 接口地址
* @param {Object} data 數(shù)據(jù)
* @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})
}
})
