vue+axios+promise实际开发用法详解

什么是axios和promise

axios

axios是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征：

支持浏览器和 node.js
支持 Promise API
拦截请求和响应
转换请求和响应数据

Promise

Promise是一种用于异步编程的语言特性，它可以让我们更方便地处理异步操作。Promise有三种状态：pending，fulfilled 和 rejected。一旦状态变成 fulfilled 或 rejected，Promise的状态就不能再次改变。

使用axios和promise的好处

使用axios和promise，可以方便地进行HTTP请求和异步操作，代码简洁清晰。同时，promise可以避免回调地狱。

axios和promise的使用

安装axios

在命令行中使用npm安装axios：

npm install axios --save

发送HTTP请求

发送GET请求：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

发送POST请求：

axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

使用promise处理异步操作

使用promise处理异步操作可以避免回调地狱，使代码清晰简洁。

示例1：使用axios发送HTTP请求，用promise处理异步操作

getData() {
  return new Promise((resolve, reject) => {
    axios.get('/api/data')
    .then(response => {
      resolve(response.data);
    })
    .catch(error => {
      reject(error);
    })
  });
}

示例2：使用promise.all处理多个异步操作

Promise.all([
  axios.get('/api/data1'),
  axios.get('/api/data2')
]).then(response => {
  console.log(response[0].data);
  console.log(response[1].data);
}).catch(error => {
  console.log(error);
});

两条示例说明

示例1：利用axios从后端获取数据

假设我们有一个后端API接口 /api/data，返回的数据类型为：

{
  "status": 200,
  "message": "success",
  "data": {
    "id": 1,
    "name": "Tom",
    "age": 25
  }
}

我们可以使用axios发送HTTP请求，获取数据。同时，使用promise处理异步操作。

getData() {
  return new Promise((resolve, reject) => {
    axios.get('/api/data')
    .then(response => {
      resolve(response.data);
    })
    .catch(error => {
      reject(error);
    })
  });
}

接下来，在Vue组件中使用该函数获取数据并展示：

<template>
  <div>
    <p>姓名：{{ data.name }}</p>
    <p>年龄：{{ data.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    };
  },
  created() {
    this.getData().then(data => {
      this.data = data;
    });
  },
  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        axios.get('/api/data')
        .then(response => {
          resolve(response.data.data);
        })
        .catch(error => {
          reject(error);
        })
      });
    }
  }
}
</script>

示例2：使用promise.all处理多个异步操作

假设我们有两个后端API接口 /api/data1 和 /api/data2，返回的数据类型分别为：

/api/data1

{
  "status": 200,
  "message": "success",
  "data": {
    "id": 1,
    "name": "Tom",
    "age": 25
  }
}

/api/data2

{
  "status": 200,
  "message": "success",
  "data": {
    "id": 2,
    "name": "Jerry",
    "age": 23
  }
}

我们可以使用promise.all处理多个异步操作，后端数据返回的顺序不影响结果。

Promise.all([
  axios.get('/api/data1'),
  axios.get('/api/data2')
]).then(response => {
  console.log(response[0].data);
  console.log(response[1].data);
}).catch(error => {
  console.log(error);
});

如果我们需要将两个数据进行拼接并展示，可以使用以下代码：

<template>
  <div>
    <p>姓名：{{ data.name }}</p>
    <p>年龄：{{ data.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    };
  },
  created() {
    Promise.all([
      this.getData1(),
      this.getData2()
    ]).then(response => {
      const [data1, data2] = response;
      this.data = {
        id: `${data1.data.id},${data2.data.id}`,
        name: `${data1.data.name},${data2.data.name}`,
        age: `${data1.data.age},${data2.data.age}`
      };
    }).catch(error => {
      console.log(error);
    });
  },
  methods: {
    getData1() {
      return new Promise((resolve, reject) => {
        axios.get('/api/data1')
        .then(response => {
          resolve(response.data);
        })
        .catch(error => {
          reject(error);
        })
      });
    },
    getData2() {
      return new Promise((resolve, reject) => {
        axios.get('/api/data2')
        .then(response => {
          resolve(response.data);
        })
        .catch(error => {
          reject(error);
        })
      });
    }
  }
}
</script>