Axios网络封装及获取请求数据,在Vue中的使用

qq_44156228

已于 2022-08-26 22:47:55 修改

阅读量628

点赞数 1

文章标签： javascript vue.js 前端

于 2022-08-26 21:38:04 首次发布

本文链接：https://blog.csdn.net/qq_44156228/article/details/126550633

版权

1.安装axios

npm install axios --save

2.创建一个a.js文件封装请求头

//1.引入axios
import axios  from "axios";

//2.创建实例
const serice = axios.create({
  //请求路径
  baseURL:"http://localhost:5000/",
  //请求的时间
  timeout:1000
})
//3.导出去
export default serice;

3.封装请求数据创建一个b.js文件

//1.导入请求头 
import serice from "./a";

//获取首页轮播图的数据
export function getBanner(){
  return serice({
    method:"GET", //请求方式
    url:'/banner?type=2' //请求路径
  })
}

4.在 c.vue文件里面调用

<script>
 data() {
   return {
      muiscList:[], //保存数据
  },
 
//1.引入
import {getBanner } from '../../network/yinlehhhh'
//2.写在 methods 里面
methods:{
    async getGnedan(){
        let res = await getBanner();
        //把数据保存到data里面
        this.muiscList = res.data.result 
        console.log(res)
    }
},
//加载完成声明周期函数  调用
mounted(){
     this.getGnedan();
},

</script>