Axios二次封装---将API中数据渲染到页面

0.具体介绍

• 利用axios将API接口中的数据获取出来，渲染到界面。
• 前三个js文件有单独的api文件夹，最后组件需要直接调用即可。
• 前提是已经安装好了 axios

1. basejs

// 放置所有的接口
const base={
    
    
    baseURL:'https://apis.tianapi.com',
    content:'/pyqwenan/index?key=XXXXXXXXXXXXX'

    // 后续有了别的接口直接放如即可
}
export default base

2. request.js

// 开始二次封装

// 1.引入
import base from './base'
import axios from 'axios'

// 2. 配置基础路径和超时时间
const instance = axios.create({
    
    
    baseURL:base.baseURL,
    timeout:50000
})

// 3. 请求拦截
// config 请求ok执行的内容，err 请求错误执行的内容
instance.interceptors.request.use(config =>{
    
    
    
    
    // 这里设置一些后台的配置
    // 开启进度条
    // token
    // post   config.header
    // 将前端的数据返回给后端，如果是对象的形式，安装插件 ·query-string· 处理对象  

    return config
},err=>{
    
    
    return Promise.reject(err)
})

// 4.响应拦截
instance.interceptors.response.use(res=>{
    
    
    // 讲请求ok的数据，直接去掉束缚，直达data数据
    return res.data
},err=>{
    
    
    return Promise.reject(err)
}) 

// 5.二次封装后导出

export default instance

3. index.js

// 导出所有的接口请求路径

// 1. 导入需要的内容
import base from './base'
import res from './request'

export const getContent=()=>res.get(base.content)

4. 具体的组件使用

<template>
  <div >
    <h2>Home</h2>
    <hr>
    <h2>获取API数据,点击刷新获取到的内容</h2>
    <hr>
    <!--4. 讲获取到的数据渲染到页面 -->
    <p>{
    
    {
    
    content}}----{
    
    {
    
    source}}</p>
  </div>
</template>

<script>
// 1. 按需要导入api中的文件   '@/api' 直接会找到src/api/index.js 
import {
    
    getContent} from '@/api'

  export default {
    
    
    data() {
    
    
      return {
    
    
       content:'',
       source:''
      }
    },
    //2. 发送请求
    mounted() {
    
    
      getContent().then((res)=>{
    
    
        // 3. 讲获取到的数据赋值给页面中的接受数据
        console.log(res);
        // 测试数据有没有成功接受到
         this.content=res.result.content;
         this.source=res.result.source;
      }).catch((err)=>{
    
    
        console.log(err);
      })
    },
  }
</script>

• tips：新人自学，敬请诸君，不吝赐教。