vue------axios在vue中的实例、基本配置和拦截器介绍

番外：aixos的所有方法promise封装

netstat -anp | grep 8898 查询端口号是否正在使用！！！

解除端口占用！用kill 进程号 来杀掉即可！！！

正题：

一、创建axios实例

多个超时时长创建多个实例
var instance = axios.create({
     
	baseURL:'http://www.xxx.com', // 基础url
	timeout:5000  // 超时时长
})

var instance2 = axios.create({
     
	baseURL:"http://www.yyy.com";
	timeout:3000
})
instance.get('/get').then(res => {
     }) // 实例一
instance.get('/getwo').then(res => {
     }) // 实例二

二、axios的配置参数说明

//2. axios实例中参数的配置
/*会覆盖掉axios全局配置*/
let instance = axios.create({
     
	baseURL:'',// 请求的域名，基本的地址
 	timeout:1000, //1. 超时时长，单位ms
 	url:'/data', //2. 请求的路径
 	method:'get,post,put,delete,patch', // 请求的方法
 	headers: {
      //3. 请求头配置
		token:'',
		Access-Control-Allow-Credentials: true, // 允许缓存
		Access-Control-Allow-Origin: https://www.huawww.work, // 允许跨域
	},
	params: {
     }, //4. 请求参数拼接在url上
	data:{
     } //5. 请求参数放在请求体中
})

// 调用请求
axios({
     })

//1. axios的全局配置
	axios.defaults({
     
		baseURL:'',// 请求的域名，基本的地址
 		timeout:1000, //1. 超时时长，单位ms
 	···
})

//2. axios实例中参数的配置

	/*会覆盖掉axios全局配置*/
	let instance = axios.create()
	// 实例又想该配置的话
	instance.defaults.timeout = 5000

//3. axios的请求配置
	instance.get('/get',{
     
		timeout:5000
	})

//4. axios具体使用方法（实际开发中）
  // 有两种请求接口：localhost:8081  和 localhost:8082
  // 创建axios实例
  let instance = axios.create({
     
	baseURL:'localhost:8081',
	timeout:5000
  })
  let instance1 = axios.create({
     
	baseURL:'localhost:8082',
	timeout:2000
  })
  // 请求
  instance.get('/getlist', {
     
	params:{
     }  // 参数会放在url上	
  }).then(res => {
     })
  instance1.get('gettwo', {
     
  	timeout:3000
  }).then(res => {
     })

三、axios的拦截器

在请求时或响应时拦截并做相应的操作！

// 一般用于要登录的项目或页面中
// 请求拦截器
 let _interceptors = axios.interceptors.request.use(config => {
     
	// 请求发送前要做的操作
	// 判断是否有token,有的话赋值
	config.headers.token = 'token值'; // 添加token值
	// 加载条启动
	return config
},err => {
     
	// 在请求错误的时候要做些什么
	return Promise.reject(err)
})
// 响应拦截器
axios.interceptors.response.use(res => {
     
	// 响应成功时的操作
	// 加载条关闭
	return res
},err => {
     
	// 响应失败时的操作
	return Promise.reject(err)
})
// 取消请求拦截器
axios.interceptors.request.eject(_interceptors)

axios 取消请求（了解即可，不用掌握）

let source =  axios.CancelToken.source();
axios.get('/getJson',{
     
	cancelToken: source.token
}).then(res => {
     }).catch(err => {
     })
// 取消请求
source.cancel('cancel http') // 中间是说明信息