说说对promise理解以及如何封装异步

Promise是一种处理异步操作的方式，在JavaScript中，Promise通过封装异步的操作，以提供更加优雅的处理方式。

Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），当一个异步操作完成后，Promise会从pending状态转换到fulfilled或者rejected状态。

Promise的基本用法如下所示：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const isSuccess = true; // 假设异步操作成功
    if (isSuccess) {
      resolve('操作成功');
    } else {
      reject('操作失败');
    }
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出：'操作成功'
}).catch((error) => {
  console.error(error); // 输出：'操作失败'
});
 

在上面的代码中，我们定义了一个promise对象，异步操作是模拟了一个1秒钟之后返回成功或失败的结果。如果异步操作成功，我们调用resolve方法，并传递结果给then方法；如果异步操作失败，我们调用reject方法，并传递错误信息给catch方法。

封装异步操作时，我们可以使用promise对象来包裹异步操作，代码如下所示：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function () {
      if (this.readyState === 4) {
        if (this.status === 200) {
          resolve(this.responseText);
        } else {
          reject(this.statusText);
        }
      }
    }
    xhr.send();
  });
}

fetchData('https://jsonplaceholder.typicode.com/todos/1')
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });
 

在上面的代码中，我们定义了一个fetchData函数，使用Promise来包裹XMLHttpRequest对象的异步操作，将结果返回给Promise对象。当Promise对象的状态变为fulfilled时，我们就可以通过then方法来获得异步操作的结果；当Promise对象的状态变为rejected时，我们就可以通过catch方法来捕捉错误信息。

通过使用Promise来封装异步操作，我们可以更加方便和灵活地处理异步操作，同时也可以避免回调地狱的问题。

axios封装

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://your-api-base-url.com',
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前做些什么
    // 可以在这里设置请求头等公共参数
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response.data;
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

/**
 * GET请求封装
 * @param {String} url 请求地址
 * @param {Object} params 请求参数，默认为空
 * @returns {Promise} Promise对象
 */
export function get(url, params = {}) {
  return instance.get(url, {
    params,
  });
}

/**
 * POST请求封装
 * @param {String} url 请求地址
 * @param {Object} data 请求参数，默认为空
 * @returns {Promise} Promise对象
 */
export function post(url, data = {}) {
  return instance.post(url, data);
}

/**
 * PUT请求封装
 * @param {String} url 请求地址
 * @param {Object} data 请求参数，默认为空
 * @returns {Promise} Promise对象
 */
export function put(url, data = {}) {
  return instance.put(url, data);
}

/**
 * DELETE请求封装
 * @param {String} url 请求地址
 * @param {Object} params 请求参数，默认为空
 * @returns {Promise} Promise对象
 */
export function del(url, params = {}) {
  return instance.delete(url, {
    params,
  });
}
 

以上代码中，我们定义了一个Axios实例，并且对请求和响应进行了拦截处理，同时封装了GET、POST、PUT和DELETE四种类型的网络请求方法。

使用时只需要导入封装好的请求方法即可

import { get, post, put, del } from './api';

get('/user', { id: 123 })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.error(err);
  });

post('/user', { name: 'John' })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.error(err);
  });
 

以上代码中，我们使用了封装的GET和POST请求方法，并且传递了请求地址和参数，然后使用Promise的then方法来处理返回结果，使用catch方法来处理异常情况。