学习 axios 遍历数组

这一篇文章有点乱，用到了很多东西，
1，封装axios
2，遍历
3，父子组件之间的通讯
我的目录结构是这样子的，接下的代码里我只写重要的一些

封装axios
1,安装axios npm install axios
2在需要封装的js文件中导入
imort axios from 'axios
3,开始封装

export function request(config){
   const instance = axios.create({
   baseURL:"...",
   timeout:5000
}),
instance.interceptors.request=use(config){
  return config
},err=>{
   cosole.log(err)
}),
instance.interceptors.response=use(res=>{
  retuen res.data
},err{
  console.log(err)
})
return inatance(config)
}

新建另一个请求文件 new.js

import { request } from "./request";
export function getNewList(){
   return request({
    url:"..."
})
}

我选择创建父子组件
父:new,vue
子newlist.vue
new.vue
可以console.log(res),查看获取到数据格式

<template>
<div>
    <newlist :list="list"></newlist>
</div>
</template>
<script>
import newlist from "./childComps/newList.vue"
 export default {
  data () {
    return {
        list: [],
       
    };
  },
  componente:{
   newlist
}
create(){
this.getNewList()
},
methods(){
  getNewList(){
    getNewList().then(res=>{
            this.list= res.data.recommend.list;
})
}
}
</script>

newlist.vue

<template>
   <div v-for="item in list" :key="item">
   <a :href="item.link">
        <p>{{item.title}}<p>
        <img :src="item.image">
   </a>
</div>
</template>
<script>
   export default{
    propos:{
      list:{
      type:Array,
      default(){
      return []
}
}
}
}
</script>