第八周（11.4-11.10）学习笔记 24软工陈奕君

学习收获：

学习使用了apifox，更深入的学习了promise和http请求

学习笔记：

异步处理

Promise：

const promise = new Promise((resolve, reject) => {
  if (成功) {
    resolve(结果);
  } else {
    reject(错误);
  }
});
​
promise
  .then(result => { /* 成功处理 */ })
  .catch(error => { /* 失败处理 */ })
  .finally(() => { /* 最终执行 */ });
​
// Promise 静态方法
Promise.all([promise1, promise2]);      // 全部成功
Promise.race([promise1, promise2]);     // 第一个完成
Promise.any([promise1, promise2]);      // 第一个成功

async/await：

async function fetchData() {
  try {
    const result = await someAsyncFunction();
    return result;
  } catch (error) {
    console.error('错误:', error);
  }
}

模块化

// 导出
export const name = "John";
export function hello() { return "Hello"; }
export default class User { }
​
// 导入
import User, { name, hello } from './module.js';
import * as module from './module.js';

类与继承

class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    return `Hello, ${this.name}`;
  }
  
  // 静态方法
  static createAnonymous() {
    return new Person('Anonymous');
  }
}
​
class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

HTTP 请求

Fetch API

// GET 请求
fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data));
​
// POST 请求
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John' })
});
​
// PUT 请求
fetch('/api/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John Updated' })
});
​
// DELETE 请求
fetch('/api/users/1', {
  method: 'DELETE'
});
​
// 错误处理
fetch('/api/users')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  });

Axios

// GET 请求
axios.get('/api/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
​
// 带参数的GET请求
axios.get('/api/users', {
  params: {
    page: 1,
    limit: 10
  }
});
​
// POST 请求
axios.post('/api/users', { name: 'John' })
  .then(response => console.log(response.data));
​
// PUT 请求
axios.put('/api/users/1', { name: 'John Updated' });
​
// DELETE 请求
axios.delete('/api/users/1');
​
// 并发请求
axios.all([
  axios.get('/api/users'),
  axios.get('/api/posts')
]).then(axios.spread((users, posts) => {
  console.log(users.data, posts.data);
}));
​
// 请求配置
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
​
// 请求拦截器
instance.interceptors.request.use(
  config => {
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  error => Promise.reject(error)
);
​
// 响应拦截器
instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error);
  }
);

API 测试

JSONPath 表达式

{
  "store": {
    "book": [
      {"title": "Book 1", "price": 10},
      {"title": "Book 2", "price": 15}
    ]
  }
}

表达式：$.store.book[0].title 结果："Book 1"

表达式说明：

• $：根节点

• store：store 属性

• book：book 数组

• [0]：第一个元素

• title：title 属性

常用 JSONPath 表达式

// 获取所有书名
$.store.book[*].title

// 获取价格大于12的书籍
$.store.book[?(@.price > 12)]

// 获取最后一本书
$.store.book[-1:]

// 获取书籍数量
$.store.book.length