Vue中axios的使用

一、axios的使用

1.安装

 npm install axios -S

2.引入

  import axios from 'axios'

3.使用

axios.get()
axios.post()
axios({
    url:'请求url',
    method:"请求的方式",
    data:'post传值方式',
    params:'get传值方式',
}).then(res=>{
    console.log(res);  //后端给前端返回的数据
})

3.使用举例
最终可以拿到图片渲染出来

 //App.vue：

<template>
    <div id="app">
      <HomeView></HomeView>
    </div>
</template>
  
<script>
  import HomeView from './views/HomeView'
  export default {
    name: 'App',
    components:{
      HomeView
    }
  }
</script>

 //HomeView.vue：
 
<template>
    <div>
        <ul>
            <li v-for='item in list' :key = 'item.id'>
                <img :src='item.imageUrl'>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            list:[]
        }
    },
    created(){
        axios({
            // 1.未封装时的url  此处为跟视频学习时视频内提供的地址
            url:'http://testapi.xuexiluxian.cn/api/slider/getSliders'  
        }).then(res=>{
            console.log(res.data.data.list);
            this.list = res.data.data.list;
        })   
    }
}
</script>

二、axios二次封装

解决的问题：方便管理和操作以及维护

• 请求的url地址统一管理
• 某些接口需要传递headers

//request.js    一般放在src目录下的utils目录下

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

// 2.创建axios对象
const service = axios.create({
   baseURL:'http://testapi.xuexiluxian.cn'
});

//3.请求拦截器   前端给后端发送数据（还没有到后端）
//    请求拦截器做的事情：headers给后端传token
service.interceptors.request.use(config => {
   console.log(1);
   return config;
},error => {
   Promise.reject(error);
});

// 4.响应拦截器   后端给前端返回数据 （前端到后端了）
   //   响应拦截器：返回code码
service.interceptors.response.use(
   (response) => {
       console.log(2);
     //  console.log(response.status)  
       // 注意下面返回的是 response.data ，所以 HomeView.vue 的 this.list 去接的时候比没封装时少一个 .data
   return response.data;
   },
   error => {
       error.response && ElMessage.error(error.response.data)
       return Promise.reject(new Error(error.response.data))
   }
)
export default service

//HomeView.vue

<script>
//这里的import与之前有改变，直接import  request.js就行
import request from '@/utils/request'
export default {
    data(){
        return{
            list:[]
        }
    },
    created(){
         request({
            // 2.封装后的url   相当于request.js里的baseURL和此处的url拼接起来
             url:'/api/slider/getSliders' 
        }).then(res=>{
            console.log(res.data.list);
            //这里与没封装的时候相比少了一个 .data，因为封装的时候是 response.data
            this.list = res.data.list;
        })
    }
}
</script>

可以正常打印出1和2，且将图片拿到并渲染。

三、api解耦

开发中一个接口可能会在很多地方用到，此时我们希望能够方便统一管理，就会用到api解耦。也就是说这个地址也有可能变，我们一般有一个api目录，目录里有文件进行相应管理。

//course.js  假设course.js就是src/utils/api下的文件

import request from '@/utils/request'

export function getSliders(){
   return request({
       url:'/api/slider/getSliders'
   })
}
// 如果有多个地址可以继续往下罗列
// export function student(){
//     return request({
//         url:'/api/slider/getSliders'
//     })
//  }

//  export function tea(){
//     return request({
//         url:'/api/slider/getSliders'
//     })
//  }

//HomeView.vue：

<template>
    <div>
        <ul>
            <li v-for='item in list' :key = 'item.id'>
                <img :src='item.imageUrl'>
            </li>
        </ul>
    </div>
</template>

<script>
//注意import写法
import {getSliders} from '@/utils/api/course'
export default {
    data(){
        return{
            list:[]
        }
    },
    created(){
        getSliders().then(res=>{
            this.list = res.data.list;
            console.log(res)
        })
    }
}
</script>