【基础知识】Promise、axios通俗理解、示例

最新推荐文章于 2024-09-07 21:42:43 发布

破茧成蝶XJ

最新推荐文章于 2024-09-07 21:42:43 发布

阅读量1.2k

点赞数 4

文章标签： javascript 前端 express

本文链接：https://blog.csdn.net/lljjhh001/article/details/130180374

版权

本文介绍了前端开发中的关键概念，包括Ajax的基本使用、构造函数的过程、Promise的脑图及示例、async/await的实践以及Axios库的运用，如请求和响应拦截器。通过示例和解释，帮助读者理解这些技术在异步处理中的应用。

摘要由CSDN通过智能技术生成

前言

Ajax、Promise、Axios是前端开发中向服务器发送请求、接收响应、处理异常的必备知识，而其中涉及到的构造函数、箭头函数简写、new实例对象等知识点又是javascript基础知识的综合。本文用脑图和示例的方式，帮助大家对以上技术形成初步的认识，用通俗的语言和示例进行阐述，共勉！

1.Ajax

2.new一个对象的过程

1）.过程

在 JavaScript 中，使用 new 关键字创建一个对象的过程中，会依次执行以下几个步骤：

创建一个空对象，这个空对象继承自构造函数的 prototype 属性。
将这个空对象作为 this 关键字传入构造函数，并执行构造函数。
如果构造函数返回了一个对象，那么返回该对象；否则返回创建的空对象。

2）.示例

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
};

const john = new Person('John', 30);
john.sayHello();

在这个例子中，我们定义了一个构造函数 Person，它接受两个参数 name 和 age，并将它们赋值给实例对象的 name 和 age 属性。

然后，我们在 Person 的原型对象上定义了一个 sayHello 方法。

最后，我们使用 new 关键字创建了一个 Person 对象，并将它赋值给变量 john。

在创建 john 对象的过程中，JavaScript 引擎执行了以下步骤：

创建一个空对象，继承自 Person.prototype。
将空对象作为 this 关键字传入 Person 构造函数，并执行该构造函数。这时，Person 构造函数中的 this 指向了 john 对象。
如果 Person 构造函数没有返回任何值，那么返回 john 对象。

在第二步中，Person 构造函数执行时，它将 name 和 age 赋值给了 john 对象的 name 和 age 属性。然后，在第三步中，由于 Person 构造函数没有返回任何值，因此 john 对象被返回。

最后，我们调用 john.sayHello() 方法，它会在 Person.prototype 上查找 sayHello 方法，并执行它。这时，this 关键字指向 john 对象，因此在 sayHello 方法中可以访问 john 对象的属性。

3.Promise

1）.脑图

2）.示例

// 定义一个 Promise 对象
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber); // 成功时调用 resolve 函数
    } else {
      reject(new Error('Number is too small')); // 失败时调用 reject 函数
    }
  }, 1000);
});

// 调用 Promise 对象的 then 方法来处理成功的结果
promise.then((result) => {
  console.log('Number is greater than 0.5:', result);
}).catch((error) => {
  console.log('Error:', error.message);
}).finally(() => {
  console.log('Promise settled');
});

在这个示例中，我们使用 Promise 对象来模拟一个异步操作。当这个异步操作完成时，它会返回一个随机数。如果随机数大于 0.5，则 Promise 对象的状态为 fulfilled，就会调用 resolve 函数并传递随机数作为参数，表示异步操作已成功完成，否则状态为 rejected。

我们通过 then() 方法来处理 Promise 对象状态为 fulfilled 的情况，通过 catch() 方法来处理 Promise 对象状态为 rejected 的情况。无论 Promise 对象的状态是 fulfilled 还是 rejected，最终都会调用 finally() 方法。

3）.async/await 实例

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

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

在这个示例中，我们定义了一个名为 getData 的 async 函数，这个函数会异步地获取数据并返回。在这个函数中，我们使用 await 关键字来等待 fetch() 方法的结果，并将结果存储在 response 变量中。然后，我们再次使用 await 关键字来等待 response.json() 方法的结果，并将结果存储在 data 变量中。最后，我们将 data 变量作为返回值返回。

在调用 getData() 函数时，我们使用 then() 方法来处理异步操作成功时的结果，并使用 catch() 方法来处理异步操作失败时的错误。需要注意的是，由于 getData() 函数是一个 async 函数，它的返回值是一个 Promise 对象，因此我们可以使用 then() 和 catch() 方法来处理异步操作的结果。

4.Axios

1）.整体认识

Axios示例：

axios.get('https://example.com/api/data')
  .then((response) => {
    console.log('Data:', response.data);
  })
  .catch((error) => {
    console.log('Error:', error.message);
  });

在这个示例中，我们使用 Axios 的 get() 方法发送一个 GET 请求，请求的 URL 是 https://example.com/api/data。

然后我们使用Promise 的 then() 方法来处理请求成功时的响应，将响应数据输出到控制台中。如果请求失败，我们使用 catch() 方法来处理错误，并将错误信息输出到控制台中。

2）.请求拦截器

axios.interceptors.request.use((config) => {
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return config;
}, (error) => {
  return Promise.reject(error);
});

在这个示例中，我们使用 Axios 的 interceptors 属性来添加一个请求拦截器。这个请求拦截器会在每个请求被发送之前执行。

在请求拦截器中，将请求头中的 Authorization 字段设置为当前用户的身份认证信息。

在这个示例中，我们使用 localStorage 存储了用户的身份认证信息，然后在请求拦截器中读取该信息并添加到请求头中。

3）.响应拦截器

axios.interceptors.response.use((response) => {
  if (response.status === 200 && response.data.code === 0) {
    return response.data.result;
  } else {
    return Promise.reject(new Error(response.data.message || '请求错误'));
  }
}, (error) => {
  return Promise.reject(error);
});

在这个示例中，我们使用 Axios 的 interceptors 属性来添加一个响应拦截器。这个响应拦截器会在每个响应被接收之后执行。

在响应拦截器中，我们根据响应状态码和响应内容来判断响应是否正常。

如果响应状态码为 200 并且响应内容中的 code 字段为 0，表示请求成功，我们返回响应内容中的 result 字段。

如果响应状态码不为 200 或者响应内容中的 code 字段不为 0，表示请求失败，我们将会返回一个 Promise 对象，该 Promise 对象的错误信息为响应内容中的 message 字段，如果 message 字段不存在，则默认返回 '请求错误'。