vue axios封装(一次封装)

步骤一: 安装

npm install --save axios        // 安装 axios
npm install --save vue-axios    // 安装 axios 插件库（可安装也可以不安装）

步骤二: 在 src 文件下创建一个 api.js 文件

import axios from 'axios';
 
axios.defaults.baseURL = '接口地址的前缀（如：http://47.94.4.201）'
 
// 多少秒之内请求完成，否则报错
axios.defaults.timeout = 30000;
 
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
 
    //可以写if判断，提前拦截错误信息
    // 判断状态
    // if (response.status == 200) {
    //    return response;
    // }
    // 不判断状态
    return response;
 
}, function (err) {
 
    return Promise.reject(err);
});
 
 
export function apiGet(url, params){ 
	return new Promise((resolve, reject) =>{ 
		axios.get(url, { 
			params: params,
			headers:{"token":sessionStorage.getItem('token')}
		}).then(res => {
			resolve(res.data);
		}).catch(err =>{
			reject(err.data) 
		}) 
   });
}
 
 
export function apiPost(url, params){
	return new Promise((resolve, reject) => {
			axios({
				method: 'post',
				url:url,
				data:params
			}).then(res => {
				resolve(res.data);
            }).catch(err =>{reject(err.data)})
        });
    }

步骤三：在 main.js 文件中声明原型使用它

import { apiGet, apiPost } from './api/ApiPackage'
Vue.prototype.$apiGet = apiGet
Vue.prototype.$apiPost = apiPost

步骤四:在页面中使用

// get请求
this.$apiGet('接口地址').then(res=>{代码逻辑})
 
// post请求
this.$apiPost('接口地址'，传递的参数).then(res=>{代码逻辑})