目次
1.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 に導入された後のリクエストは、「./request」からインスタンスをインポートするように記述されます。
get メソッドの例:
import const GetIMg = (params) =>instance.get('/sys/oss/file/getOOSUrl',params)
投稿メソッドの例:
import const postNewCopy= (params) =>instance.post(`/h5/activiti_process/getProcessNode?id=${params.id}`)
.env.developmentおよび.env.productionにネットワーク ヘッダーを書き込みます: VUE_APP_BASE_API = "xxx"
2. 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 メソッドの例:
エクスポート const GetIMg = (params) => uni.$get('/sys/oss/file/getOOSUrl',params)
投稿メソッドの例:
import const postNewCopy= (params) => uni.$post(`/h5/activiti_process/getProcessNode?id=${params.id}`)
注: 必ずmain.jsに導入してください: import '@/utils/request.js'