Vue封装Axios

在vue脚手架中需要封装axios来达到更好使用axios的目的

比如 token 的鉴权，错误处理等

 首先我们要在 src目录下创建一个plugins 文件夹

这个文件夹以后就是来存储我们vue项目的一些第三方的配置文件

我们在Plugins目录下创建一个 myAxios.ts的配置文件（封装axios）

myAxios.ts 文件内容如下

import axios from 'axios'

// 创建axios实例。统一配置
const service = axios.create({
  baseURL: "http://xxx.com, // api的base_url
  timeout: 15000 // 请求超时时间
  // .... 其他信息
})

// request拦截器
service.interceptors.request.use(config => {
  //... 获取token，存储token 等操作
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
      return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

配置文件写完了还不够，我们需要引入到main.js文件中

import Vue from 'vue'
import App from './App.vue' 
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from '@/plugins/myAxios.ts'
Vue.use(ElementUI);

//替换vue内部的http为axios
Vue.prototype.$http = axios
Vue.config.productionTip = false


new Vue({
  render: h => h(App),
}).$mount('#app')

这句话的意思就是讲vue内置的http的api替换为axios

Vue.prototype.$http = axios

方便我们后续使用axios来请求接口

至此配置就已经全部完成了

使用

this.$http.get("/api/joke/list?num=6")
        .then((res) => {
          console.log(res.data)
        })

这里需要注意下，调用的时候一定要使用 this.$http 不然就会报找不到http这个定义的错误

顺便再分享一个vue上传文件的小案例

<template>
  <div id="app">				
	<el-upload
  class="upload-demo"
  drag
  :on-success="handleFileSuccess"
  :before-upload="beforeFileUpload"
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<br><br>
<img :src="imageUrl" alt="" class="img"> 
<p>
    <el-input v-model="input" id="input" placeholder=""></el-input>
    <el-button type="primary" plain @click="selectCopy()">复制</el-button>
</p>
    <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->



  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      imageUrl:"",
    }
  },
  methods:{

    submitUpload() {
      this.$refs.upload.submit();
    },
     selectCopy() {
    const inputElement = document.querySelector('#input');
    inputElement.select();
    document.execCommand("Copy");

                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            },

    handleFileSuccess(res,file){
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$message.success("上传图片成功")
      console.log(res)
      // this.input = this.res
      this.input = this.imageUrl
    },
    beforeFileUpload(file){
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size /1024 /1024 < 2;

      if(!isJPG){
        this.$message.error("上传图片只能是JPG格式")
      }
      if(!isLt2M){
        this.$message.error("上传图片大小不能超过 2MB")
      }
      return isJPG && isLt2M;
    }
  }
  
}
</script>

<style  scoped>


#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  
}


</style>