【从0到1打造vue element-ui管理后台 】 第二课 封装请求

第二课 请求封装

一、请求封装

这节课我们初步的认识了请求接口的封装的方法，里面涉及到了create，自定义配置、请求拦截器、响应拦截器，从划分myaxios.js到api下的getList方法，最后到页面中使用getList渲染内容

打开src/utils/myaxios.js文件，加入axios.create，自定义配置新建一个 axios 实例

import axios from 'axios'

axios.create({
    baseURL:'/', //基础路径，发送请求路径的前缀
    timeout:5000 //超时时间
})


然后加入请求拦截器、响应拦截器

//请求拦截器
myaxios.interceptors.request.use(function(config){
    return config;
},function(error){
    return Promise.reject(error)
})  


//响应拦截器
myaxios.interceptors.response.use(function(response){
    return response;
},function(error){
    return Promise.reject(error)
})  

export default myaxios


在src/api/test.js建立新文件


import myaxios from '../utils/myaxios'

export default{
    getList(){
        const promise1 = myaxios({
            method:'get',
            url:'data.json'
        })
        return promise1
    }
}


然后在helloworld.vue导入test.js

import testApi from "../api/test.js"

created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      testApi.getList().then((resp) => {
        consooe.log(resp.data);
      });
    },
  },
  
最后一步是把得到的数据展示在页面中
    <ul>
      <li v-for="(item ,index) in list" :key="index">
        {{item.bookname}}
      </li>
    </ul>
    
    data(){
        return{
          list:[]
        }
    },
    
     fetchData() {
      testApi.getList().then((resp) => {
        console.log(resp.data);
        this.list = resp.data
      });
    },