封装 Axios 对象

因为项目中很多组件中要通过 Axios 发送异步请求，所以封装一个 Axios 对象。自已封装的 Axios 在后续可以使用 axios 中提供的拦截器

在src目录下创建utils目录及utils下面创建request.js文件

创建一个json文件用来测试

在request.js配置axios

// 引入axios
import axios from "axios"
import { Promise } from "core-js"


// axios.create可以帮助我们创建一个实例对象（其实他所创建的这个实例对象就是axios对象）
// 创建实例
const request = axios.create({
    baseURL: "/",
    timeout: 5000, //请求超时时间
})

// 添加拦截器
request.interceptors.request.use(msg => {
    // 在发送请求之前做些什么
    return msg
}, err => {
    // 对请求错误做些什么
    return Promise.reject(err)
})

// 响应拦截器
request.interceptors.response.use(msg => {
    return msg
}, err => {
    return Promise.reject(err)
})

// request.get('db.json').then(msg => {
//     console.log(msg)
// }).catch(error => {
//     console.log(error)
// })

//导出request对象
export default request;

在src目录下创建api目录及api下面创建test.js文件

test.js

import request from "../utils/request"

const BASE_URL = "http://localhost:8080/"

//请求方式一
// request.get(BASE_URL + "db.json").then(msg => {
//     console.log(msg)
// }).catch(error => {
//     console.log(error)
// })

//请求方式二
// request({
//     type: "get",
//     url: BASE_URL + "db.json",
// }).then(msg => {
//     console.log(msg)
// }).catch(error => {
//     console.log(error)
// })

export default {
    getList() {
        return request({
            type: "get",
            url: BASE_URL + "db.json",
        })
    }
}

在页面中调用

<template>
  <div class="hello"></div>
</template>

<script>
import test from "../api/test"
export default {
  created(){
    this.fetch()
  },
  methods:{
    fetch(){
      test.getList().then(msg=>{
        console.log(msg)
      }).catch(error=>{
        console.log(error)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

Axios 封装

封装 Axios 对象