vue封装axios与拦截器

ES6方法 axios

• 步骤一：配置api/request.js

import axios from 'axios'
import qs from "qs";
import { Indicator } from 'mint-ui'; // 导入拦截器
axios.default.baseURL = 'index.php?r=university/' // 配置基础路径

// 请求之前 第一步 拦截器
axios.interceptors.request.use( function (config) {
   	Indicator.open({
 			text: 'Loading...',
		 spinnerType: 'fading-circle'
   	});// 进入页面之前 页面加载
    	return config;
},function (error) {
   return Promise.reject(error)// 对请求错误怎么处理
}

// 请求之后 第三步 拦截器
axios.interceptors.response.use( function (config) {
   Indicator.close();// 页面加载结束后关闭拦截器
	return config;
},function (error) {
// 对请求错误怎么处理
return Promise.reject(error)
}

// 第二步 请求数据
const axiosGet = (url,params)=>{
   return new Promise((resolve,reject)=>{
   	//根据url和参数请求数据，请求成功就resolve(),失败reject()
   	axios.get(url,{params:params})
   		.then((res)=>{
   			resolve(res.data);//请求成功就resolve(),执行下一步
   		})
   		.catch((err)=>{
   			reject(err)
   		})
   })
}

//post的参数 {}==》对象转字符串 qs
const axiosPost = (url,params)=>{
   return new Promise((resolve,reject)=>{
   	//根据url和参数请求数据，请求成功就resolve(),失败reject()
   	params = qs.stringify(params);//对象转字符串
   	axios.post(url,{params:params})
   		.then((res)=>{
   			resolve(res.data);//请求成功就resolve(),执行下一步
   		})
   		.catch((err)=>{
   			reject(err)
   		})
   })
}

export default{
 get:axiosGet,
 post:axiosPost
}

• 步骤二 在main.js中配置全局

import ajax from "./request";
Vue.prototype.$http = ajax;

• 步骤三 在组件中调用

//this.$ajax.get('index.php?r=university/search',params)返回的是promise对象
// params 是接口文档标注的请求参数，非固定
this.$http.get('search',params).then((res)=>{
	console.log(res)
})
this.$http.get("h5-info", params).then((res)=>{
	console.log(res)
})

this.$http.get("h5-info").then((res)=>{
	console.log(res)
})

• 调用方法二

// getData 是自定义函数 url是get请求的路径
methods:{
	async getData(params){
		const res = await this.$http.get('url',params)
		console.log(res)
	}		
}