老规矩还是十分钟带你了解Vue中axios的基本使用 《建议收藏，以防丢失！》

Vue中axios的基本使用

首先简单了解什么是Axios!

Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

关于axios的特点，可以查看axios中文文档，还可以了解一下axios, ajax和fetch的详细比较内容。

接下来开始安装axios，在项目目录下执行npm i axios vue-axios（不同的node版本，成功后的提示不同）

安装成功后进行引入，在项目目录下src文件夹里创建新的utils文件夹，然后，在文件夹里创建axios.js

1，在axios.js页面上进行引入后，还需在main.js中引入

import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
 
Vue.use(VueAxios, axios) 

在main.js中引入 import ‘./utils/axios’

2，以上完成后就可以使用了，接下来以get请求为例，使用方式如下：

this.axios.get(url).then(res => {
      //请求成功，触发then中的函数
      console.log(res)  
    })
     .catch(error =>
      //请求失败，触发catch中的函数 可省略
      console.log(error)
    )

百度搜索的API免费接口：https://www.apishop.net/#/api/detail/?productID=104

<template>
  <div>
    <h1>axios中get请求方式</h1>
    <button @click="get">get请求</button>
    <!-- 网络请求数据初始是null，请求后才有值，使用前必须判断有值 -->
    <!-- 虚拟标签template 用于包裹其他标签，配合v-if使用，本身无意义 -->
    <template v-if="data">
      <div>femaleTable：</div>
        <div v-for="(item, index) in data.result.femaleTable" :key="index" class="table">
          <span>{{index+1}}</span>
          <span>年龄: {{item.age}}</span>
          <span>身高: {{item.height}}</span>
          <span>体重: {{item.weight}}kg</span>
        </div>
    </template>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: null,
    }
  },
  methods: {
    get() {
      let apiKey = '2WshDvM3a8682c1238af5a34f4eece5319e5a5637618bb7'
      let url = 'https://api.apishop.net/common/BMI/getStandardWeightTable?apiKey='+ apiKey;
      this.axios.get(url)
        .then(res => {
          console.log(res);
          this.data = res.data;
        })
    }
  },
};
</script>
 
<style  lang="scss">
.table {
  width: 400px;
  border-bottom: 1px solid pink;
}
span {
  margin: 10px 10px;
}
</style>

请求结果如下：data —> result中有两个数组femaleTable（女性数据列表）和maleTable（男性数据列表）

请求成功后，可以把数据显示到页面，以femaleTable（女性数据列表）为例

3，点击get请求按钮，femaleTable数据在页面上显示结果如下：

关于post请求方式与get类似，不同点在于地址url和参数params分开传递，使用方式如下：

this.axios.post(url, params).then(res => {
      //请求成功，触发then中的函数
      console.log(res)  
    })
     .catch(error =>
      //请求失败，触发catch中的函数 可省略
      console.log(error)
    )

还是以免费接口https://www.apishop.net/#/api/detail/?productID=104为例，发送post请求，代码如下：

<template>
  <div>
    <h1>axios中post请求方式</h1>
    <button @click="post">post请求</button>
    <template v-if="male">
      <div>maleTable:</div>
        <div v-for="(item, index) in male" :key="index" class="table">
          <span>{{index+1}}</span>
          <span>年龄: {{item.age}}</span>
          <span>身高: {{item.height}}</span>
          <span>体重: {{item.weight}}kg</span>
        </div>
    </template>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      male: null,
    }
  },
  methods: {
    post() {
      let apiKey = '2WshDvM3a8682c1238af5a34f4eece5319e5a5637618bb7'
      let url = 'https://api.apishop.net/common/BMI/getStandardWeightTable'
      this.axios.post(url, `apiKey=${apiKey}`).then(res => {
        console.log(res);
        this.male = res.data.result.maleTable
      })
    }
  },
};
</script>
 
<style  lang="scss">
.table {
  width: 400px;
  border-bottom: 1px solid pink;
}
span {
  margin: 10px 10px;
}
</style>

点击post请求按钮，获得数据，在页面上显示maleTable数据，结果如下：