uniapp功能篇-1.二次封装luch-request(类似于axios)

每个项目的需求各有偏差,务必根据自己的项目调整相关配置

npm i luch-request -S

1.创建url.js 文件

方便调整线上与调试模式的数据地址

	//基础Api
	const BASE_API="http://xxx.xxx.xxx:8801/"
export{
	BASE_API
}

2.创建 httpload.js 文件

import Request from '@/utils/luch-request/index.js'
import {
	BASE_API
} from '@/http/url.js'
// import qs from 'qs'
const http = new Request({
	baseURL: BASE_API, //设置请求的base url
	timeout: 300000, //超时时长5分钟,
	header: {
		'Content-Type': 'multipart/form-data;application/json;charset=UTF-8;'
	}
})

//请求拦截器
http.interceptors.request.use((config) => { // 可使用async await 做异步操作
	const token = uni.getStorageSync('token');
	if (token) {
		config.header={
			"Authorization":'Bearer ' + token
		}
	}

	if (config.method === 'POST') {
		config.data = JSON.stringify(config.data);
	}
	return config
}, error => {
	return Promise.resolve(error)
})

// 响应拦截器
http.interceptors.response.use((response) => {
	console.log(response)
	return response
}, (error) => {
	//未登录时清空缓存跳转
	if (error.statusCode == 401) {
		uni.clearStorageSync();
		uni.switchTab({
			url: "/pages/index/index.vue"
		})
	}
	return Promise.resolve(error)
})
export default http;

3.创建api文件夹,将以下代码放入index.js

api封装后导出供页面使用

import request from '@/http/httpload.js'
		/* 测试Api */
	export default{
		// get请求 可以拼接url或者传入数据对象 二选一
		getData(data){
			// 传入的data对象  {ip:'121.00.00.01'}; 
			return request.get("/ip/getIpInfo.php",{params:data});
		},
		// post请求
		postData(data){
			// 传入的data对象  {ip:'xxxxxx'}; 
			return request.post("/ip/getIpInfo.php",data);
		},
		// put请求
		putData(data){
			// 传入的data对象  {ip:'xxxxxx'}; 
			//put方法大部分会以拼接地址的形式使用 如:request.put("/test/getInfo.php?id="+4)
			return request.put("/ip/getIpInfo.php",data);
		},
		// delete请求
		deleteData(data){
			// 传入的data对象  {ip:'xxxxxx'}; 
			//delete方法大部分会以拼接地址的形式使用 如:request.delete("/test/getInfo.php?id="+4)
			return request.delete("/ip/getIpInfo.php",data);
		}
	} 

4.页面中调用

<template>
  <div>
    <el-button class="el-icon-user" @click="getData">获取数据</el-button>
  </div>
</template>
<script>
import TestApi from "@/api/index.js";
export default {
  name: "testDemo",
  methods: {
    getData() {
      var data={id:'xxxxxxx'}
      TestApi.getData(data).then(res => {
         console.log(res);
      }).catch(error=>{
        console.log(error);
      });
    }
  }
};
</script>