项目中封装axios的思路

192 阅读1分钟

1.先创建一个axios请求的request.js文件

    //引入axios
    import axios from 'axios'

    //axios.create创建实例
    const request = axios.create({
        timeout:5000,               //请求超时时间
        // baserURL:'http://localhost:8888/'                       //配置基础路径
    })

    //拦截器
    //请求
    request.interceptors.request.use(config=>{
     //发送请求之前做些什么
        return config
    },err=>{
        //请求错误时做些什么
        return Promise.reject(error)
    })

    //响应拦截
    request.interceptors.response.use(response=>{
        //响应成功之前
        return response
    },error=>{
        //响应失败
        return Promise.reject(error)
    })


    //导出request对象
    export default request;

2.创建一个api.js文件

    const BIM_URL = "http://localhost:8888/"

    export default {
        //列表接口
        getList(){
            return request({type:'get',url:BIM_URL+'a.json',})
        }
    }

3.组件内引入

    <script>
    import request from '../api/api'
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      created() {
        this.fetch()
      },
      methods: {
        fetch(){
          request.getList().then(responce=>{
            console.log(responce)
          }).catch(error=>{
            console.log(error)
          })
        }
      },
    }
    </script>