📖Vue-cli 关于 axios 的封装

Vue-cli 关于 axios 的封装

在项目 src 文件中新建 network 目录在目录中新建个文件用来封装 axios

axios.js 代码如下

//axios.js
import axios from 'axios'//引入axios
	const newaxios = axios.create({
		timeout: 1000,//超时时间
		baseURL: 'https://api.apiopen.top/getJoke',//默认访问URL
		method: 'get',//请求方式
		headers: {
		    'Content-Type': 'application/json;charset=UTF-8'
		  }
	})

//请求
export function getaxios(url,res,err){
	newaxios(url).then(response => (
        res(response)
        ))
      .catch(function (error) { // 请求失败处理
        err(error)
      });
}

//请求拦截
newaxios.interceptors.request.use(config => {
	//在这里可以做以下事情
		//1：在这里可以筛选不符合服务器要求的信息
		//2：每次请求时页面显示加载中动画
		//3：某些网络请求必须携带Token
  return config
},err=>{//拦截失败
	console.log(err);
})

//响应拦截
newaxios.interceptors.response.use(response => {
  //在这里可以做以下事情
  	//1：清楚页面显示加载中动画
  return response.data
},err=>{
	console.log('响应失败'+err);
})

在 main.js 中引入该封装文件的方法

//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import {getaxios} from './network/axios'//引入该封装好的方法


Vue.prototype.$axios = getaxios;//放到全局中
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

后续需要在其他文件中使用 axios 时如下

<template>
  <div class="webaxios">
    <button @click='searc'>查询</button>
  </div>
</template>

<script>
export default {
  name: 'webaxios',
  data () {
    return {
      select: '你好'
    }
  },
  methods:{
    searc(){//使用封装的方法
      this.$axios('https://api.apiopen.top/getJoke',res =>{console.log(res)},err=>{console.log(err)})
    }
  }
}
</script>
<style scoped>
</style>