利用axios读取后台接口

ゝ一纸荒年。 2024-04-18 09:19 48阅读 0赞

我们都知道在vue2.0以后就对vue-resource停止更新了，推荐使用的则是axios

axios使用的方式也很简单，通过三个步骤就可以实现

## 一、安装 axios ##

npm install axios

## 二、引入 axios ##

在main.js文件中

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import axios from "axios"
    
    
    Vue.config.productionTip = false
    Vue.prototype.$axios = axios;

这里需要注意的是，axios与其他的模块不同的是不能使用use方法，需要用到原型  
Vue.prototype.$axios = axios;

## 三、使用 axios ##

在组件中进行相应的请求

<template>
      <mu-container class="test">
        <button @click="getData()">发送请求</button>
      </mu-container>
    </template>
    
    <script>;
    export default {
      name: "test",
      data() {
        return {};
      },
      methods: {
        getData: function() {
          this.$axios
            .get("https://www.apiopen.top/journalismApi")   //这里get请求做例子，相应的post可以去官网查看
            .then(function(response) {
              console.log(response);
            })
            .catch(function(error) {
              console.log(error);
            });
        }
      }
    };
    </script>

当我们点击按钮时请求接口后，可以看到打印出来的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]  
下面提供一些免费的接口供大家测试

新实时段子  
https://api.apiopen.top/getJoke?page=1&count=2&type=video

通过Id查段子  
https://api.apiopen.top/getSingleJoke?sid=28654780

快递查询：  
https://api.apiopen.top/EmailSearch?number=1012002

随机单句诗词推荐：  
https://api.apiopen.top/singlePoetry

随机一首诗词推荐：  
https://api.apiopen.top/recommendPoetry

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d85eb5aeef984cc48427eaebd7a06775.png