vue|uni-app网络请求封装（完整版） JavaScript|javascript|vue.js|uni-app

├── api# 所有请求 │└── user.js# 用户请求api ├── store# 全局store管理 │└── modules# api模块 ││└── user.js# 用户请求模块 │└── index.js# 状态管理初始化 ├── utils# 全局公用方法 │├── auth.js# 本地缓存 │├── env.js# 公共参数 │└── request.js# 网络请求中间件 └── main.js# 入口文件加载组件初始化等

下面是文档内容
api/user.js(用户请求api)

// 引用网络请求中间件 import request from './../utils/request'; /** *登陆请求 */ export function login(data) { return request({ url: '/user/login', method: 'POST', data }) }

【vue|uni-app网络请求封装（完整版）】store/modules/user.js(用户请求模块)

// 引用用户请求api import {login} from '../../api/user'; import {setToken} from '../../utils/auth'; //下面我是示例的微信小程序的参数，可自行修改请求参数 const actions = { login({commit}, param) { return new Promise((resolve, reject) => { login({ iv: param.iv,// 请求参数(可自行修改) code: param.code // 请求参数(可自行修改) }).then(response => { // 这里可以自己添加方法 // 保存获取到的token到本地之类的 // 必须在resolve之前执行 setToken(response.token) //将获取到的token保存到本地 resolve(response) }).catch(error => { console.log(error) }) }) } }; export default { namespaced: true, actions }

store/index.js(状态管理初始化配置)

import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user'Vue.use(Vuex) const store = new Vuex.Store({ modules: { user } }); export default store

utils/auth.js(本地缓存配置)

const TokenKey = 'token'; // 认证令牌 export function getToken() { return uni.getStorageSync(TokenKey) }export function setToken(token) { return uni.setStorageSync(TokenKey, token) }export function removeToken() { return uni.removeStorageSync(TokenKey) }

utils/env.js(公共参数)

"use strict"; // 变量可自行添加修改 export default { //存放变量的容器 appid: '****', baseUrl: 'http://**.***.***.***' } /** *appid :小程序appid *baseUrl :服务端域名 */

utils/request.js(网络请求中间件)

import {getToken,removeToken} from '../utils/auth'; import env from '../utils/env'; function service(options = {}) { options.url = `${env.baseUrl}${options.url}`; // 判断本地是否存在token，如果存在则带上请求头 if (getToken()) { options.header = { 'content-type': 'application/json', 'Authorization': `${getToken()}` // 这里是token(可自行修改) }; } return new Promise((resolved, rejected) => { options.success = (res) => { // 如果请求回来的状态码不是200则执行以下操作 if (res.data.code !== 200) { // 非成功状态码弹窗 uni.showToast({ icon: 'none', duration: 3000, title: `${res.data.msg}` }); // 登陆失效 if (res.data.code === 403) { // 清除本地token removeToken() // 关闭所有页面返回到登录页 uni.reLaunch({ url: '/pages/login/login' }) } // 返回错误信息 rejected(res) } else { // 请求回来的状态码为200则返回内容 resolved(res.data.data) } }; options.fail = (err) => { // 请求失败弹窗 uni.showToast({ icon: 'none', duration: 3000, title: '服务器错误,请稍后再试' }); rejected(err); }; uni.request(options); }); }export default service;

页面上使用demo(login.vue)

****** > export default { data() { return {} }, onLoad() {}, methods: { loginBut: function() { // 调用状态管理内的函数请求 // user是store/index.js下定义的user名称，login是user这个文件内的请求函数 // code跟iv是传送到store/modules/user.js下login函数内的参数 this.$store.dispatch('user/login', { iv: value[0][1].iv, code: value[1].code }).then(result => { // 登陆成功的结果 console.log(result) }) }, } } ******

完结~
不懂的可留言~