vue项目全局axios请求和拦截器配置_vue的全局前置拦截器

VUE在main.js里设置全局axios请求的配置

//下载包
npm i axios -S

在main.js配置如下

import axios from 'axios'
//配置共同的端口号和域名,后期代码中直接写接口就行,例如/user,/books
axios.default.baseURL='请求根路径'
//在vue实例对象的原型上添加这个属性
//今后，在每个.vue组件中要发起请求，直接调用this.axios.x××
Vue.prototype.axios=axios

在组件中使用

<template>
	<div>
		<button @click="qingqiu">点击按钮发请求</button>
	</div>
</template>

//不在原型中添加axios属性的写法(不推荐,建议看下面这个)
/\*
<script>
 import axios from 'axios'
 export dafault {
 methods:{
 async qingqiu(){
 const {data:res}=await axios.get('请求完整地址')
 console.log(res)
 }
 }
 }
</script>
\*/

//第二种写法,在原型上添加axios属性,相当于全局配置了axios,全局都能直接使用
<script>
	export dafault {
		methods:{
			async qingqiu(){
			//this指向原型,通过打点调用里面的axios即可
				const {data:res}=await this.axios.get('请求接口')
				console.log(res)
			}
		}
	}
</script>

把axios挂载到 vue原型上 有个缺点------无法实现API接口的复用
当想要在多个组件发送同样的请求时,每个组件都要写同样的按钮和方法(都要重新调用一下API接口) ,不利于复用

实现axios方法的复用

第一步:封装公共接口

在scr目录下创建一个utils文件夹,里面创建一个request.js模块,添加如下代码

//导入axios
import axios from 'axios'

const request = axios.create({
	//指定请求的根路径
	baseURL:'http://127.0.0.1'
})
export default request

//使用方法,在需要使用的模块导入当前的公共接口模块
//通过request.get()/request.post(),发请求,url路径直接写各个接口名即可,无需写全名了

拓展(后面下面的第二步才是封装接口的步骤):
axios.create()是添加了自定义配置的新的axios

例如：
用axios发送请求：
axios({
 method:'POST',
 url:'http://localhost:8000/login',
  data
  })
  用axios.create()创建一个新的axios发请求：
  cosnt requset = axios.create({
  //基础路径
  baseURL:'http://localhost:8000/'
  })
  requset({
  method:'POST',
  url:'/login',
  data
  })

好处：、
1.可以简化路径写法
2.当基础路径发生变化时方便修改，有利于维护

第二步,封装公共的模块步骤

在src目录下创建API文件夹,然后存放不同的api模块,例如文章模块的api的请求,这里封装acticleAPI.js模块
内容如下

//在实际开发有各种各样的,例如评论相关的增删改查,用户信息的,文章相关的等等模块
//这里演示文章相关api的封装,其他根据需求也可以如此封装
//文章相关api都在此模块

//1.导出方法(方法名要见名知意)(向外按需导出)
//下面的request为公共接口的模块向外导出的,因此需要导入request.js公共模块,不然用不了
import request from '@/公共模块路径'
export const getArticleListAPI = function(参数值一,参数值二){
	return request.get('/articles',{
		//请求参数
		params:{
			参数名一:参数值一,
			参数名二:参数值二
		}
	})
}

第三步调用封装好的方法发请求

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。