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

在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'

以上完成后就可以使用了，接下来以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

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

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

点击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请求，代码如下：

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