7. Vue3中封装axios

开发与上线时，接口不变，域名不同，可创建实例对象，把路径写进去

可以向axios传递相关配置来创建请求，Axios API参考如下

Axios API | Axios 中文文档 | Axios 中文网

1. 使用npm安装axios

npm install axios

2. 建立request文件夹与相关js文件，封装axios请求

 3. 先完成封装，将要使用的axios实例写成一个js文件，index.js完整代码如下

      instance-service

// 封装到这里
import axios from "axios";   // 1. 引入axios

let service=axios.create({   // 2. 创建实例
    baseURL:"http://localhost:3000/",  // 3. 基础路径,后面调用只写接口即可
    timeout:3000                       // 4. 返回时间
})

export default service  // 5. 导出实例，在其他地方引入使用

4. 获取首页轮播图数据，home.js完整代码如下

import service from "..";   // 1. 引入  ..出去直接拿到request，拿index.js

// 获取首页轮播图的数据          // 有参数在这里传入即可
export function getBanner(){   // 2. 要用到getBanner方法，后面去用的地方先引入   
    return service({           // 3. 这个函数相当于执行axios，即这个实例
        method:"GET",
        url:"banner?type=2",  // 4. 在TopSwiper中调用，调用就要返回，所以function前加export
    })                        //    在这里引入，然后使用
}

5. 在我们需要进行aixos请求的地方进行使用，编写TopSwpier.vue

//  接home.js，先引入   onMounted
import { getBanner } from '@/request/api/home';

6. 改写onMounted方法

onMounted(async()=>{       // 更改后的方法  async await 等待数据返回
        let res = await getBanner();
        state.images=res.data.banners
        console.log(res);
       })

7. 项目重新启动，结果如下