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

安装

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