vue和uniapp的网络请求封装
这里主要分享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'
更多推荐
所有评论(0)