前端进阶之路

后端接口调用学习看懂request.js学习接口请求封装import store from /store import config from /config import { getToken } from /utils/auth import errorCode from /utils/errorCode import { toast, showConfirm, tansParams } from /utils/common let timeout 10000 const baseUrl config.baseUrl const request config { // 是否需要设置 token const isToken (config.headers || {}).isToken false config.header config.header || {} if (getToken() !isToken) { config.header[Authorization] Bearer getToken() } // get请求映射params参数 if (config.params) { let url config.url ? tansParams(config.params) url url.slice(0, -1) config.url url } return new Promise((resolve, reject) { uni.request({ method: config.method || get, timeout: config.timeout || timeout, url: config.baseUrl || baseUrl config.url, data: config.data, header: config.header, dataType: json }).then(response { let [error, res] response if (error) { toast(后端接口连接异常) reject(后端接口连接异常) return } const code res.data.code || 200 const msg errorCode[code] || res.data.msg || errorCode[default] if (code 401) { //加这里 const dingLogining uni.getStorageSync(dingLogining) if(!dingLogining){ showConfirm(登录状态已过期您可以继续留在该页面或者重新登录?).then(res { if (res.confirm) { store.dispatch(LogOut).then(res { uni.reLaunch({ url: /pages/login }) }) } }) } reject(无效的会话或者会话已过期请重新登录。) } else if (code 500) { toast(msg) reject(500) } else if (code ! 200) { toast(msg) reject(code) } resolve(res.data) }) .catch(error { let { message } error if (message Network Error) { message 后端接口连接异常 } else if (message.includes(timeout)) { message 系统接口请求超时 } else if (message.includes(Request failed with status code)) { message 系统接口 message.substr(message.length - 3) 异常 } toast(message) reject(error) }) }) } export default request举个例子你前端页面想吃炸鸡需要数据。同事写的后台后端做炸鸡的餐厅提供数据。接口API点餐的菜单和送餐的骑手。utils/request.js你手机里的外卖APP系统。它帮你自动填地址、自动用优惠券、遇到商家关门自动弹窗提示不用你每次点外卖都自己去搞这些繁琐的事情。第一部分准备工具箱引入依赖import store from /store // 仓库存着你个人的全局状态比如登录状态 import config from /config // 配置文件存着外卖软件的默认设置 import { getToken } from /utils/auth // 获取通行证拿到你的VIP会员卡号(Token) import errorCode from /utils/errorCode // 错误密码本比如 404代表找不到店500代表店炸了 import { toast, showConfirm, tansParams } from /utils/common // 常用工具弹窗提示、确认框、参数转换工具 let timeout 10000 // 默认如果等了10秒10000毫秒还不来就超时报错 const baseUrl config.baseUrl // 默认的街道地址后端服务器的统一前缀地址第二部分配置请求const request config { // 1. 查验身份是不是不需要带会员卡(Token) const isToken (config.headers || {}).isToken false config.header config.header || {} // 如果你有会员卡(Token)且这个接口没有明确说“不需要带卡”那就把卡号塞进请求头Header里带给后端 if (getToken() !isToken) { config.header[Authorization] Bearer getToken() } // 2. 整理参数如果是GET请求比如你要查东西就把你要查的条件拼在网址后面 if (config.params) { let url config.url ? tansParams(config.params) // 比如变成 /api/user?name小明age18 url url.slice(0, -1) config.url url }第三部分外卖小哥出发与回来Promise 与 uni.request// Promise 就是一个“承诺”它承诺不管成功还是失败最后一定会给你个准信儿 return new Promise((resolve, reject) { // uni.request 是小程序/App真正发请求的方法真正的外卖小哥 uni.request({ method: config.method || get, // 请求方式默认GET timeout: config.timeout || timeout, // 等多久 url: config.baseUrl || baseUrl config.url, // 去哪家店 data: config.data, // 传给后端的具体数据 header: config.header, // 带着刚刚贴了会员卡的请求头 dataType: json }).then(response { // 小哥回来了 response 就是他带回来的东西第四部分处理结果let [error, res] response // 1. 小哥路上出车祸了网络根本没通 if (error) { toast(后端接口连接异常) reject(后端接口连接异常) // reject 代表以失败告终 return } // 2. 拿到餐厅给的单子看看单子上的状态码(code) const code res.data.code || 200 const msg errorCode[code] || res.data.msg || errorCode[default] // 3. 状态码是 401也就是你的会员卡过期了保安不让你进 if (code 401) { const dingLogining uni.getStorageSync(dingLogining) if(!dingLogining){ // 弹个窗问你登录过期了要不要重新登录 showConfirm(登录状态已过期...).then(res { if (res.confirm) { // 你点了确认清空登录状态跳回登录页 store.dispatch(LogOut).then(res { uni.reLaunch({ url: /pages/login }) }) } }) } reject(无效的会话...) // 4. 状态码是 500餐厅厨房起火了服务器内部错误 } else if (code 500) { toast(msg) // 弹出错误提示 reject(500) // 5. 状态码不是 200200代表一切顺利其他都是有业务毛病 } else if (code ! 200) { toast(msg) reject(code) } // 6. 历经千辛万苦外卖没问题把热乎的饭菜交给你resolve resolve(res.data) }) // 后面还有个 .catch是处理超时等异常的也是统一弹窗报错就不细说了接口定义示例import request from /utils/request // 查询检查任务列表 export function listTask(query) { return request({ url: /×××/×××/list, method: get, params: query }) }使用接口获取数据getDetail(taskDetailId).then(response { this.form response.data if (this.form.images ! null) { this.imageList this.form.images.split(,) } this.foodTaskRectifyResultList response.data.foodTaskRectifyResultList this.foodTaskRectifyResultList.forEach(item { if (item.images ! null) { item.images item.images.split(,) // console.log(item.images, item.images) } }) })套用这个模式页面布局1.上传图片/图片显示所有手机都能实现一行三个图片使用函数calccalc((100% - 44rpx) / 3) //在calc函数中加号和减号两边必须有空格不然无法正确识别2.uni-app框架使用的单位是rpx如果UI是px那么要进行单位转换自己代码中的rpx值750 * 元素在设计稿中的宽度 / 设计稿基准宽度;3.要在大布局上加font-family和font-weight不然如果你在页面内的某些布局上没有写font-family那么这些部分的文字会随着系统调节4.有时候在开发者工具找来的类名用v-deep不起作用有三种办法1直接用这个类名不要v-deep;2用!important3看看是不是外面布局约束了它将其挪出来。5.有时候不同系统样式的显示层级会出错用v-show这种方式控制控制图片上传方式只能拍照不允许上传使用u-upload组件而且支持图片回显。设置:sourceType[‘camera’]就只允许手机拍照上传不管电脑那里还是可以上传的。u-upload :actionaction :headerheader refuUpload namefile multiple :maxCount10 :show-progressfalse :sourceType[camera] :max-size5 * 1024 * 1024 upload-text拍摄图片 v-modelsubmitForm.images/u-upload图片上传的逻辑梳理u-upload :actionaction :file-listFileList :headerheader refuUpload :show-progressfalse namefile multiple :maxCount10 :sourceType[camera] upload-text拍摄图片 :max-size5 * 1024 * 1024 on-successbeforeUpload()/u-upload1.使用的uView的组件链接uView的upload2.参数说明参数说明action上传接口地址fileList显示已上传的文件列表(Array)header上传请求头比如 Authorization token通常是对象这个代码里的header是因为我上传图片时没有令牌无法成功所以才加的。fileList显示已上传的文件列表(Array)ref组件引用名,如果refuUpload可通过 this.$refs.uUpload 调用组件方法fileList显示已上传的文件列表(Array)-----用来回显的show-progress上传进度条name上传时表单字段名后端一般按这个字段取文件multiple允许多选布尔属性写上就表示truemaxCount最多允许上传文件数sourceType文件来源如果写上:sourceType“[‘camera’]”代表只允许拍照不允许从相册选upload-text上传按钮文字max-size选择单个文件的最大大小单位 B(byte)默认不限制假设5MB可以写成5102410243.方法说明方法含义on-sucess单个文件上传成功时触发回调4.方法逻辑import {getToken} from /utils/authdata(){ FileList:[], action: https://zcs/prod-api/file/upload, header: { Authorization: Bearer getToken(), }, }//上传照片实际执行链路-入口 //点击不合格按钮触发open(index)open(index)会做三件事记录当前检查项下标this.index index接着打开弹窗然后把当前项已有的Images逗号分隔URL字符串转成FileList回显到上传组件 open(index){ this.inde index this.popupVisible true this.FileList [] //避免上一次打开时的图片残留 let images this.foodTaskDetailList[index].images //下面的语句判断当前检查项有没有已保存的图片数据images是否有值 if(images){ this.FileList images.split(,).map((item,index) ({ url:item })) } //images.split(,)把字符串按逗号切开例如“a.jpg,b.jpg”-[a.jpg,b.jpg]split 这个方法的设计就是“把一个字符串拆成多个片段并返回数组” //map((item,index) ({url:item}))遍历数组把每一项变成对象所以要用包住对象字面量。因为在箭头函数里{...}默认会被当成“函数体代码块”不是对象字面量 //明明FileList就是个数组为啥split后已经是数组了还要转换为对象呢因为虽然FileList是Array但是Array只规定“外层是数组”不规定元素必须是字符串它可以是string[]:[a.jpg,b.jpg]也可以是object[]:[{url:a.jpg},url:b.jpg]也可以是混合不推荐这里之所以map成对象是因为u-upload的file-list通常要求的是“文件对象数组”没想至少要有url字段组件才能回显图片。 }//上传照片实际执行链路-照片URL什么时候写回业务数据 //async是一个异步函数 //async beforeUpload(){ //遍历list取response下code200的data里的url用,拼接 let url this.$ref.uUpload.lists.map(item item.response.data.url).join(,) //u-upload组件内部自己维护了lists一张图片上传成功后会把每项的progress、response等信息回填到lists对应项里类似于 { code: 200, data: { url: https://.../xxx.jpg } }因此是 item.response.data.url join是拼接方法用于将数组或列表中的所有元素连接成一个字符串。元素通过制定的分割符进行分隔。 //然后写入当前检查项 this.foodTaskDetailList[this.index].images url return true }//其余知识补充 //JavaScript是单线程语言意味着一次只能执行一个任务为了避免长时间运行的任务阻塞主线程JavaScript使用异步编程模型 //async是一个异步函数总是返回一个Promise:如果返回值不是Promise会自动包装成resolved Promise如果抛出异常会返回rejected Promise。 //await智能在async函数内部使用 //async function detchData(){ const result await somwPromise; console.log(result) } //async会暂停async函数的执行等待Promise完成如果Promise被resolve返回resolve的值如果Promise被reject抛出错误可以用try/catch捕获 //async函数里的await是写起来串行跑起来异步。举个例子 async function fetchUserData() { try { const response await fetch(https://api.example.com/user); if (!response.ok) { throw new Error(网络响应不正常); } const data await response.json(); console.log(data); } catch (error) { console.error(获取数据失败:, error); } } //这里面的const response await fetch(...)只有执行完毕后才能执行 const data await response.json();也就是fetchUserData这个函数内部代码是串行的但是async/await并不是卡死而是在await的同时主线程Event Loop跳出async函数已经跑去执行别的代码了当await后面的异步操作完成时引擎会把之前从好的进度重新推回执行栈。**//提出疑惑** //beforeUpload里面既然已经将组件lists的url每一个都获取了并且拼接成了逗号分割的字符串传给了this.foodTaskList[index].images那为什么弹窗点提交时从this.$refs.uUpload.lists里面判断有没有图片 //问题答案因为images只在on-success时更新如果提交时只看images那可能会造成以下情况 //1)用户删了图片但是代码里面没有同步清空images结果images还有旧url校验会误判有图 //2)状态滞后用户刚选图或还在上传中images还没写进去 //3)上传失败是images还是之前的旧值只看images会把这次失败掩盖掉。 **//提出疑惑2** //回显的FileList是images的url逗号分割而来的但是如果images只在on-success时更新那我删除一张图片然后点击取消会什么进来的时候回显正常删掉的哪张图不在了 //问题答案看到“删了后再进来也没了”主要是因为现在看到的很多时候是 u-upload 组件自己的内存状态lists不是重新从 images 全量恢复。 **//提出疑惑3** //但是我界面回显不是依赖fileList吗而我的fileList是images里的url按逗号分割形成的跟Lists没关系呀 //问题答案这跟源码有关系u-upload组件的实现细节不是直接用fileList渲染而是fileList先喂给内部lists真正渲染的是lists。 watch: { fileList: { immediate: true, handler(val) { val.map(value { // 首先检查内部是否已经添加过这张图片因为外部绑定了一个对象给fileList的话(对象引用)进行修改外部fileList // 时会触发watch导致重新把原来的图片再次添加到this.lists // 数组的some方法意思是只要数组元素有任意一个元素条件符合就返回true而另一个数组的every方法的意思是数组所有元素都符合条件才返回true let tmp this.lists.some(val { return val.url value.url; }) // 如果内部没有这个图片(tmp为false)则添加到内部 !tmp this.lists.push({ url: value.url, error: false, progress: 100 }); }); } }, // 用户通过ref手动的形式移除一张图片 remove(index) { // 判断索引的合法范围 if (index 0 index this.lists.length) { this.lists.splice(index, 1); //可以看到移除也是从lists当中移除的 this.$emit(on-list-change, this.lists, this.index); } }, //提出疑问4 //所以我的代码里压根不用把images的url按逗号分割然后传到fileList里面照样能够实现回显是吗 //images - split - FileList 这步还是需要的只是现在因为组件状态保留偶尔看起来“不传也能回显”。 //同一次打开/未销毁组件时upload内部lists还在可能看起来“回显” //重新进入页面、切换到别的检查项或组件被重建后内部lists会丢失。这是只有把后端保存的images重新转成FileList才能稳定回显。 //测试遗漏没有测试一个检查项上传图片后点击取消再进入下一个检查项的不合格页面查看回显是否正常 //测试遗漏没有测试一个检查项删除图片后点击取消再返回到首页然后进入自查任务页面然后查看回显是否正常。//上传照片实际执行链路-不合格页面点击提交时做什么 //顺序检验检验至少要有一张上传完成的图片 const uploadedList this.$refs.uUpload.lists.filter(item item.progress 100); if (uploadedList.length 0) { uni.showToast({ title: 请拍摄不合格图片, icon: none, duration: 2000 }); return; } //根据上面的疑惑解答可知道为什么校验是要从lists里面进行校验了//上传照片实际执行链路-真正提交到后端 if (this.form.taskId ! null) { updateTask(this.form).then(response { this.handleUpdate() }) } //因为Images我们已经准备好了所以这里直接调用后端接口就行了。