vue和uniapp的网络请求封装_uniapp vue3 接口请求封装 js

目录

一、vue请求封装

二、uniapp请求封装

一、vue请求封装

在项目的src文件夹下新建一个request文件夹，里面的request.js就是放封装代码的地方。api.js里面引入,然后去写对应的请求。

 
import axios from "axios"
const instance = axios.create({
    baseURL:process.env.VUE_APP_BASE_API,
    timeout:5000
})
// 设置请求拦截器
instance.interceptors.request.use(config => {
    // console.log("每一次发起请求前，都会先执行这里的代码");
    // console.log(config); //config是一个对象：记录了本次请求的配置信息
    let token=localStorage.getItem("token");
    // 在发请求前携带请求头
    if(token){
        config.headers["X-Access-Token"]=token;
    }
    return config
}, err => {
    return Promise.reject(err)
})
// 设置响应拦截器：对服务器响应回来的数据做统一处理
instance.interceptors.response.use(res=>{
    // console.log("每一次接收到响应，都会先执行这里的代码，再去执行成功的那个回调函数then");
    // res :是一个对象：原先说的axios封装的res对象
    return res
},err=>{
    return Promise.reject(err)
})
 
export default instance

api.js里面引入后，请求写法如下;import instance from './request'

举例get方法：

export const GetIMg = (params) => instance.get('/sys/oss/file/getOOSUrl',params)

举例post方法：

export const   postNewCopy= (params) => instance.post(`/h5/activiti_process/getProcessNode?id=${params.id}`)

.env.development和.env.production里面写入网络头部：VUE_APP_BASE_API ="xxx"

二、uniapp请求封装

文件放的地方和vue一样，就是语法不一样，引用的时候是一致的！

 
const $request = (url, data, method = 'POST', headers = "application/json;") => {
	return new Promise((resolve, reject) => {
		uni.showLoading({
			title: '数据加载中',
			icon: 'loading',
			mask: true
		});
		let token= uni.getStorageSync("token")
		uni.request({
			url: 'xxx/api' + url,
			method: method,
			data: data,
			header: {
				'Content-Type': headers,
				'X-Access-Token': token
			},
			success(res) {
				resolve(res)
				uni.hideLoading(); //关闭loading
			},
			fail(error) {
				reject(error);
				uni.hideLoading(); //关闭loading
			},
			complete() {
				uni.hideLoading(); //关闭loading
			}
		})
	})
}
//get请求
const $get = (url, data) => {
	return $request(url, data, 'GET')
}
//post请求
const $post = (url, data) => {
	return $request(url, data, 'POST')
}
//给uniapp原生的requset赋值
//记得要在mian.js中引用
uni.$request = $request
uni.$get = $get
uni.$post = $post

api.js里面引入后，请求写法如下;

举例get方法：

export const GetIMg = (params) => uni.$get('/sys/oss/file/getOOSUrl',params)

举例post方法：

export const   postNewCopy= (params) => uni.$post(`/h5/activiti_process/getProcessNode?id=${params.id}`)

注意：一定要在main.js里面引入：import '@/utils/request.js'