【uni-app】uni-app 封装 uni.request 携带请求头

在 uni-app 中使用 uni.request 发起网络请求，由于业务的需要，一些请求需要携带请求头访问，于是我对该请求方法进行了封装。

新建 common/app.js

export const apiBaseUrl = 'http://192.168.1.104:8091/sports-tms/' // 不需要登录的接口 const noToken = [ 'sys/wxlogin' ]; const request = (method, methodType, data, callback, hideLoading) => { // 请求头信息 var headers = { 'content-type': 'application/x-www-form-urlencoded' }; // 判断是否需要登录 if (!(noToken.indexOf(method) >= 0)) { // 获取用户 token let userToken = uni.getStorageSync('x-access-token') if (!userToken) { uni.navigateTo({ url: '/pages/login/login' }) return false; } else { // 将 token 放入请求头中 headers['x-access-token'] = userToken } } // 如果调用接口不明确不显示 loading if (!hideLoading) { uni.showLoading({ title: '加载中' }); } uni.request({ url: apiBaseUrl + method, data: data, header: headers, method: methodType, success: (response) => { if (!hideLoading) { uni.hideLoading(); } console.log(response.data) const result = response.data if (result.code == 500) { uni.showToast({ icon: 'none', title: result.message, duration: 1500 }) } else { console.log(result) callback(result) } }, complete: () => { uni.hideLoading(); }, fail: (error) => { uni.hideLoading(); if (error && error.response) { showError(error.response); } } }) } const showError = error => { let errorMsg = '' switch (error.status) { case 400: errorMsg = '请求参数错误' break case 401: errorMsg = '未授权，请登录' break case 403: errorMsg = '跨域拒绝访问' break case 404: errorMsg = `请求地址出错: ${error.config.url}` break case 408: errorMsg = '请求超时' break case 500: errorMsg = '服务器内部错误' break case 501: errorMsg = '服务未实现' break case 502: errorMsg = '网关错误' break case 503: errorMsg = '服务不可用' break case 504: errorMsg = '网关超时' break case 505: errorMsg = 'HTTP版本不受支持' break default: errorMsg = error.msg break } uni.showToast({ title: errorMsg, icon: 'none', duration: 1000, complete: function() { setTimeout(function() { uni.hideToast(); }, 1000); } }); } // 微信登录 export const wxlogin = (data, callback, hideLoading) => request('sys/wxlogin', 'POST', data, callback, hideLoading);

修改 main.js

主要增加 import * as request from './common/api' 和 Vue.prototype.$api = {request}

import Vue from 'vue' import App from './App' import store from './store' import uView from "uview-ui"; import * as request from './common/api' Vue.use(uView); Vue.config.productionTip = false Vue.prototype.$store = store Vue.prototype.$api = {request}; App.mpType = 'app' const app = new Vue({ store, ...App }) app.$mount()

在 common/api.js 中定义接口

export const wxlogin = (data, callback, hideLoading) => request('sys/wxlogin', 'POST', data, callback, hideLoading);

三个参数

data：该接口需要传递的参数callback：请求完成的回调函数uniHideLoading：是否显示加载中…，默认为 true

使用接口

this.$api.request.wxlogin({ code: that.code, encryptedData: encryptedData, iv: iv }, res => { console.log(res) uni.setStorageSync("x-access-token", res.result.token) uni.setStorageSync("userId", res.result.userInfo.id) // 进入首页 uni.switchTab({ url: '/pages/educational/educational' }) });