Vue+Axios，使用公共开放接口，完成列表界面的对接

研三前端狗

已于 2022-10-19 17:28:39 修改

阅读量422

点赞数

分类专栏： Vue学习的过程笔记文章标签： vue.js javascript 前端

于 2022-10-19 17:19:01 首次发布

本文链接：https://blog.csdn.net/weixin_43972428/article/details/127411299

版权

Vue学习的过程笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文档详细介绍了如何在Vue脚手架中安装和使用Axios库。首先，在About.vue组件中引入Axios并实现一个简单的GET请求。接着，创建request.js文件用于设置拦截器，并在api.js中定义API接口。最后，在组件中调用API获取数据并显示。通过这种方式，可以更好地组织和管理HTTP请求。

摘要由CSDN通过智能技术生成

安装

在vue脚手架中安装axios

开始使用

首先在About.vue文件中

<template>
    <div id="about">
  <button  @click="getFn">发起一个get请求</button>
    </div>
</template>
 
<script>
export default {
    name: "About",
methods: {
    getFn(){
        //发起一个get请求
    }
},

}
</script>

到axios中文网

// 在 node.js 用GET请求获取远程图片
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

找到这个部分的代码，把它复制到About.vue文件里

如图所示

<template>
    <div id="about">
        <button @click="getFn">发起一个get请求</button>
    </div>
</template>
 
<script>
import axios from 'axios';
export default {
    name: "About",
    methods: {
        getFn() {
            //发起一个get请求
            // 在 node.js 用GET请求获取远程图片
            axios({
                method: 'get',
                url: 'https://api.apiopen.top/api/getHaoKanVideo',
            })
                .then(function (response) {
                    console.log(response)
                });
        }
    },

}
</script>

这样就可以简单运行一下了，可以把数据进行打印出来，这就是get请求

在文件夹建立一个request文件夹，里面建立request.js和api.js

request.js主要用来拦截的，文件主要包括{引入axios，创建实例（可以在axios中文网中复制）}

//用来做拦截的
import axios from 'axios';
const instance = axios.create({
    baseURL: 'https://api.apiopen.top/api',
    timeout: 4000,

});
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

//整体导出
export default instance;

在api.js文件中

//将request.js整体导入
import request from '../request/request'
//按需导出每个请求，也就是按需导出每个api
//请求首页数据
export const GetAboutAPI =() =>request.get('/getHaoKanVideo')

<template>
    <div id="about">
        <button @click="getFn">发起一个get请求</button>
     <div v-for="item in list">{{item}}</div>
    </div>
</template>
 
<script>
//按需导入
import {GetAboutAPI} from '@/request/api'
export default {
    name: "About",
    data() {
        return {
            list:[],
        }
    },
    methods: {
        getFn() {
            //发起一个get请求
            // 在 node.js 用GET请求获取远程图片
            GetAboutAPI().then(res => {
                console.log(res.data)
                    console.log(res)
                
                    this.list = res.data.result.list
                });
        }
    },

}
</script>