1. 配置URL地址文件
项目根目录下生成一个文件夹 config
,文件夹中生成一个 config.js 文件。
module.exports = {
dev:"www.xxxxxx.xxx",
test:"www.xxxxxx.xxx",
pro:"www.xxxxxx.xxx"
}
2. 请求拦截、响应拦截
项目根目录下生成一个文件夹 utils
,文件夹中生成一个 request.js 文件。
import config from "/config/config.js";
let baseUrl = config.test;
module.exports = {
fetch: (url, data = {}, option = {}) => {
// 请求前操作 -- 开始 --
let {
loading = true, toast = true, method = 'get'
} = option;
// 将token存放在了globalData,通过getApp().globalData获取, 注意将获得登录后获得的token存在globalData中。
let header = {
'content-type': 'application/x-www-form-urlencoded',
'token':getApp().globalData.token
};
// 请求前操作 -- 结束 --
return new Promise((resolve, reject) => {
if (loading) {
uni.showLoading({
title: "加载中...",
mask: true
})
};
uni.request({
url: baseUrl + url,
data,
method,
header,
// 响应操作 -- 开始 --
success: function(result) {
let res = result.data;
if (res.code == 200) { // 根据后端返回的code值,对不同的状态做相应的处理;
if (loading) {
uni.hideLoading();
}
resolve(res);
} else if (res.code == 203) {
uni.redirectTo({
url: '/login/login'
})
} else {
if (toast) {
uni.showToast({
mask: true,
title: res.msg,
icon: 'none'
})
} else {
uni.hideLoading()
}
resolve(res);
}
},
fail: function(e = {
code: -1,
msg: errMsg,
errMsg
}) {
console.log(e)
let msg = e.errMsg;
if (msg == "request:fail timeout") {
msg = "请求超时,请稍后再试";
} else if (msg == "request:fail" || msg == "") {
msg = "请求失败,再试试"
}
uni.showToast({
title: msg,
icon: "none"
})
reject(e);
}
// 响应操作 -- 结束 --
})
})
},
}
3. 引入文件
在 main.js
中引入写好的 request.js
文件
import Vue from 'vue'
import App from './App'
import request from "./utils/request.js";
Vue.prototype.get = request.fetch;
Vue.prototype.post = (url, data) => {
return request.fetch(url, data, {
method: "post"
});
};
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
});
app.$mount()
4. 请求的方法 get 、post
直接调用 this.get()
或者直接调用 this.post()
就可以了
login() {
let data={...};
this.get("/api/login",data).then(res=>{
console.log(res);
})
// or
this.post("/api/login",data).then(res=>{
console.log(res);
})
}
有疑惑的小伙伴,可能是我表达不清楚,可以留言讨论,如有错误,也希望大家不吝指出。