1、项目下新建common文件夹,再创建request.js文件
2、打开request.js文件,开始写封装的代码
思路很简单
request.js参考代码如下
var apiUrl = 'https://www.xxxx.cn/qianwang.php/'; //后台接口的url
// #ifdef H5
var baseUrl = '';
if (process.env.NODE_ENV === 'development') {
//本地环境,即开发环境
baseUrl = '/api'
} else {
//线上环境
baseUrl = apiUrl
}
// #endif
//封装request请求
const sendRequest = (url, method = 'GET', data = {}, contentType) => {
//判断header提交数据类型
let types = '';
if (method == 'POST' && !contentType) {
types = 'application/x-www-form-urlencoded'
} else if (method == 'POST' && contentType) {
types = contentType
} else {
types = 'application/json';
}
// #ifdef H5
var bases = baseUrl + '/' + url;
// #endif
// #ifndef H5
var bases = apiUrl + '/' + url;
// #endif
var token = uni.getStorageSync('token') || ''; //从缓存中拿到登录token
return new Promise(function (resolve, reject) {
uni.request({
url: bases,
data: data,
method: method,
header: {
'Content-Type': types,
'Accept': 'application/json, text/javascript, */*; q=0.01',
'token': token
},
success(res) {
if (res.header.authorization || res.header.Authorization) {
uni.setStorageSync('token', res.header.authorization || res.header.Authorization);
}
var code = res.statusCode;
//请求接口访问出错
if(code!=200) {
console.log(res);
// uni.showModal({
// title: '登录提示',
// content: '身份已过期,请重新登录后再来操作!',
// success: ress => {
// if (ress.confirm) {
// uni.redirectTo({
// url: '/pages/login/index'
// })
// }
// }
// })
}
resolve(res.data);
},
fail(err) {
reject(err);
}
})
})
}
module.exports.sendRequest = sendRequest
3、在main.js全局注册
//封装一个uniapp请求
import http from 'common/request.js'
Vue.prototype.$http = http;
4、页面调用
//调用后端接口,获取登录token
this.$http.sendRequest("user/user/index", "GET", {
code: res.code,
})
.then((res) => {
console.log(res);
//成功回调返回登录token
var get_token = "123456"; //测试期间回调token写死
uni.setStorageSync("token", get_token); //将返回的token储存在前端缓存(这是一个同步接口)
})
.catch((err) => {
//请求失败
console.log(err);
});
<template>
<view class="container">
<view>
<span @click="dianji">点击查看后端返回的token:{{ show_token }}</span>
</view>
</view>
</template>
<script>
export default {
onLoad() {
//获取小程序登录token(code换取后端token)
uni.login({
provider: "providerCode",
success: (res) => {
// console.log(res);//返回获取openid所需的code
//返回code成功,用code请求后台,获取登录token
if (res.errMsg == "login:ok") {
//调用后端接口,获取登录token
this.$http.sendRequest("user/user/index", "GET", {
code: res.code,
})
.then((res) => {
console.log(res);
//成功回调返回登录token
var get_token = "123456"; //测试期间回调token写死
uni.setStorageSync("token", get_token); //将返回的token储存在前端缓存(这是一个同步接口)
})
.catch((err) => {
//请求失败
console.log(err);
});
}
},
fail: (error) => {
reject(error);
},
});
},
data() {
return {
show_token: "",
};
},
methods: {
dianji() {
this.show_token = uni.getStorageSync("token"); //从缓存从拿到登录token
console.log(this.show_token);
},
},
};
</script>
成功显示