基于axios封装fetch方法及调用实例

基于axios封装fetch方法及调用实例，可以按照以下步骤进行:

第一步：安装和引入axios

安装axios：

npm install axios --save

引入axios：

import axios from 'axios';

第二步：封装fetch方法

封装fetch方法的主要目的是简化axios的使用，提高代码的可复用性。这里我们将会封装一个get和post方法，并对其进行封装。

const Fetch = {
  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, { params })
        .then(response => {
          resolve(response.data);
        }, err => {
          reject(err);
        })
        .catch((error) => {
          reject(error);
        });
    });
  },
  post(url, data = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, data)
        .then(response => {
          resolve(response.data);
        }, err => {
          reject(err);
        })
        .catch((error) => {
          reject(error);
        });
    });
  }
}

第三步：使用fetch方法

使用封装后的fetch方法非常简单，直接调用即可。下面我们举例说明：

例1：使用get方法获取数据

Fetch.get('https://www.example.com/api/data', { id: 1 })
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.log(err);
  });

例2：使用post方法提交数据

Fetch.post('https://www.example.com/api/data', { name: '张三', age: 18 })
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.log(err);
  });

以上就是基于axios封装fetch方法及调用实例的完整攻略。