前端综合实训第二次笔记

最新推荐文章于 2024-09-28 19:02:04 发布

最新推荐文章于 2024-09-28 19:02:04 发布

导引：

正文：

	async function fetchData() {
	let response = await fetch('https://api.example.com/data');
	let data = await response.json();
	return data;
	}

	fetchData().then(data => {
	console.log(data);
	}).catch(error => {
	console.error('Error:', error);
	});

	async function useData() {
	try {
	let data = await fetchData();
	console.log(data);
	} catch (error) {
	console.error('Error:', error);
	}
	}

	const axios = require('axios');
	const instance = axios.create({
	baseURL: 'https://api.example.com',
	timeout: 1000,
	headers: {'X-Custom-Header': 'foobar'}
	});

1 // import语句不加花括号，导⼊整个模块对象。
2 // import语句加花括号，只导⼊模块中的指定变量或函数。
3 import WxRequest from './request'
4 import { getStorage,clearStorage } from './storage'
5 import { modal,toast } from './extendApi'
6
7 // ----------------- 实例化 ----------------------
8
9 code...
10
11 // 响应拦截器
12 instance.interceptors.response = async (response) => {
13
14 console.log(response);
15
16 // 从response中结构isSuccess
17 // const { isSuccess } = response
18 const { isSuccess, data } = response
19
20 // 如果isSuccess为false,说明执⾏了fail回调函数
21 // 这时候说明⽹络异常，需要给⽤户提示⽹络异常
22 if (!isSuccess) {
23 wx.showToast({
24 title: '⽹络异常请重试',
25 icon: 'error'
26 })
27
28 return response
29 }
30
31 // 判断服务器响应的业务状态码
32 switch(data.code){
33
34 // 如果后端返回的业务状态码等于200，说明请求成功，服务器成功响应了数据
35 case 200:
36 // 对服务器响应数据做点什么
37 return data
38
39 // 如果返回的业务状态码等于208，说明没有token，或者token失效
40 // 就需要让⽤户登录或者重新登录
41 case 208:
42 const res = await modal({
43 content:'鉴权失败，请重新登录',
44 showCancel:false // 不显示取消按钮
45 })
46 if(res){
47 // 清除之前失效的token，同时要清除本地存储的全部信息
48 clearStorage()
49 wx.navigateTo({
50 url: '/pages/login/login',
51 })
52 }
53 return Promise.reject(response)
54 
55 default:
56 toast({
57 title:'程序出现异常，请联系客服或稍后重试'
58 })
59 return Promise.reject(response)
60 }
61
62 // 对响应数据做点什么
63 // return response
64 // return data
65 }
66
67 // 将 WxRequest 的实例通过模块化的⽅式暴露出去
68 export default instance

// test.js
// const res = await instance.get('/index/findBanner')
// const res = await instance.get('/cart/getCartList')
const res = await instance.get('/cart/getCartList111')

<!--pages/test/test.wxml-->
<view class="box">
<button type="warn" size="mini" plain bindtap="AllHandler">测试并发请求
</button>
</view>
page({
async AllHandler(){
await instance.get('/index/findBanner')
await instance.get('/index/findCategory1')
await instance.get('/index/findBanner')
 await instance.get('/index/findCategory1')
await
Promise.all([instance.get('/index/findBanner'),instance.get('/index/findCategory
1'),
instance.get('/index/findBanner'),instance.get('/index/findCategory1')])
 
})

21
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端综合实训第二次笔记

导引：

继上次笔记后我们又进行了更多有关前段设计和数据互通的学习和实训，由此来记录期间的笔记。

正文：

一：localStorage、sessionStorage、cookie分别是什么以及区别？

cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术

localStorage是永久存储在客户端浏览器上，除非手动去清除

sessionStorage也是存储在客户端浏览器上，但仅在当前会话有效，关闭页面或浏览器后被清除

localStorage、sessionStorage、cookie在同名时都是可以被覆盖的

区别：

1.cookie数据始终携带在http请求中，而sessionStorage和Localstorage不会自动把数据发送给服务器，只在本地保存

2.存储大小不同，cookie数据不能超过4k，所有cookie只适合保存很小的数据。sessionStorage和Localstorage存储大小比cookie大很多，可以达到5M或更大。

4.读写操作的便捷程度，cookie的相关操作操作起来较为繁琐，而 sessionStorage和Localstorage的api接口使用方便

5.cookie出现的时间较早，目前见到的浏览器都支持，而localStorage和sessionStorage出现的时间较晚，对于版本较低的浏览器不支持。

6.web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。

二：GET、POST、PUT、DELETE、HEAD五种请求方法的不同区别

1.GET方法：主要用于从指定的资源请求数据

安全性：GET请求的参数会附加在URL后面，并以查询字符串的形式呈现。

长度限制：由于URL的长度有限制，GET请求的参数数量和数据量也相应地受到限制。

数据传输方式：GET请求通常只包含URL中的查询参数，不包含请求体。

通信类型：单向请求-响应协议，客户端发送请求，服务器返回数据。

幂等性：GET请求是幂等的，这意味着对同一URL的多个GET请求应该产生相同的结果

2.POST方法：主要用于向服务器提交数据

非幂等性：POST方法是非幂等的，即多次发送相同的POST请求可能会导致不同的结果。

请求体：POST请求包含请求体，可以发送各种类型的数据，如表单数据、JSON、XML等。

用途：用于向服务器提交数据以创建或更新资源。

安全性：相比GET方法，POST方法更为安全，因为它将参数包含在请求体中而不是URL中

数据传输方式：POST请求的数据包含在请求体中，可以传输大量数据，且支持多种数据类型。

通信类型：仍然是单向请求-响应协议，但侧重于数据的提交和处理。

3.PUT方法：用于更新服务器上已有的资源

用途：用于替换服务器上的资源。

幂等性：PUT请求是幂等的，这意味着对同一资源的多次PUT请求应该产生相同的结果。

请求体：PUT请求通常包含请求体，用于传输要更新的资源内容。

数据传输方式：PUT请求的数据也包含在请求体中，它通常用于上传整个资源或文件。

通信类型：与POST类似，但语义上更侧重于资源的替换而非创建。

4.DELETE方法：主要用于请求服务器删除指定的资源

安全性：DELETE请求通常不会缓存，也不会在浏览器的历史记录中留下痕迹，这使得它相对更安全。

用途：请求服务器删除指定的资源。

数据传输方式：通常不需要额外的请求体数据。

通信类型：单向请求-响应协议，专注于资源的删除操作。

幂等性：DELETE请求不是幂等的，这意味着多次发送相同的DELETE请求可能会导致不同的结果

5.HEAD方法：

用途：与GET方法类似，但服务器在响应中只返回HTTP头部，不返回实际数据。

数据传输方式：只返回响应头，不包含响应体。

通信类型：单向请求-响应协议，主要用于获取资源的元信息。

三：各种独立用法：

一、Promise的用法：

1. 创建 Promise：

你可以使用 new Promise() 构造函数来创建一个新的 Promise 对象。构造函数接受一个执行器函数作为参数，该函数接受两个参数：resolve 和 reject，分别用于处理异步操作成功和失败的情况。

2. 处理 Promise

你可以使用 then() 和 catch() 方法来处理 Promise。then() 用于处理异步操作成功的情况，catch() 用于处理异步操作失败的情况。

3. Promise 链式调用

由于 then() 和 catch() 方法都返回新的 Promise，因此你可以链式地调用它们。

4. Promise.all()

如果你有一组 Promise 需要同时处理，并且想要在所有 Promise 都完成时获取它们的结果，你可以使用 Promise.all()。

5. Promise.race()

Promise.race() 方法返回一个新的 Promise 实例，这个实例在给定的 Promise 实例数组中的任意一个实例最先解析或拒绝时，就会以相同的解析值或拒绝原因来解析或拒绝

二、Object.assign的用法:

Object.assign() 是 JavaScript 中一个用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象的方法。它将返回目标对象

source1 和 source2 的属性被复制到 target 对象中。注意，Object.assign() 会直接修改 target 对象，并且返回的也是 target 对象。

三、class类的用法:

class 类是面向对象编程（Object-Oriented Programming，简称 OOP）的核心构造。面向对象编程是一种编程范式，它使用“对象”来设计应用程序和软件。在面向对象编程中，对象是由类创建的，而类定义了对象的属性和方法。

定义类：在编程语言中，你通常使用关键字 class 来定义一个类。

属性：类可以包含属性，这些属性是类的所有实例共享的数据。属性可以是数据属性（也称为实例变量）或方法（也称为函数）。

数据属性：数据属性通常用来存储类的实例的特定状态。这些数据可以在实例被创建时设置，并可以通过实例进行访问。

方法：方法定义了类可以执行的操作。它们通常与类的实例关联，但也可以定义为类方法或静态方法。

构造函数：在类中，__init__ 方法是一个特殊的方法，称为构造函数或初始化方法。当创建类的新实例时，它会自动被调用。它用于初始化新创建的对象的状态。

继承：类可以继承自其他类，这意味着一个类可以继承另一个类的属性和方法。这有助于代码重用和扩展现有类的功能

四、async/await的用法：

async/await 是基于Promise的异步编程解决方案，使得异步代码看起来、写起来更像同步代码。

1.声明async函数：

2.调用async函数：

3.使用await在另一个async函数中调用：

五、BaseUrl的使用方法：

1.在前端开发中，特别是使用如Axios等HTTP库时，baseUrl常用于配置API请求的基础URL。它简化了配置和调用，因为所有API请求都会自动附加这个基础URL。

例如，在使用Axios时：

四、Request知识点：

1、封装微信小程序网络请求类

类的定义:使用 class 关键字定义一个封装了微信小程序网络请求的类，如 Request,

属性定义:defaults 对象:存储请求的默认配置，如基础 URL、请求方法、请求头、超时时间等interceptors 对象:存储请求和响应的拦截器函数，用于在请求发送前或响应返回后执行某些操作。

构造函数：在类中，init 方法是一个特殊的方法，称为构造函数或初始化方法。当创建类的新实例时，它会自动被调用。它用于初始化新创建的对象的状态。

使⽤响应拦截器：在使⽤ wx.request 发送⽹络请求时。只要成功接收到服务器返回，⽆论 statusCode 是多少，都会进⼊ success 回调。因此开发者根据业务逻辑对返回值进⾏判断。后端返回的业务状态码如下：

1. 业务状态码 === 200，说明接⼝请求成功，服务器成功返回了数据

2. 业务状态码 === 208，说明没有 token 或者 token 过期失效，需要登录或者重新登录

前端并发请求是指在前端⻚⾯同时向后端发起多个请求的情况。当⼀个⻚⾯需要请求多个接⼝获取数据时，为了提⾼⻚⾯的加载速度和⽤户体验，可以同时发起多个请求，这些请求之间就是并发的关系。