vue 移动端封装axios

1. 下载 axios

npm instal --save -dev axios

2.src目录下的utils文件夹中，新建request.js文件，request.js文件的代码如下：

import { getToken } from './auth';
import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import { Toast } from 'vant';
import obj from '@/service/config.js'
// 创建 axios 实例
const service = axios.create({
  baseURL: obj.baseURL, // 接口地址
  timeout: 60000 // 请求超时时间
})

//请求前
service.interceptors.request.use(
	//发送请求时即进行拦截，session为null的情况下不发送请求
	function (config) {
		console.log(config, '请求前拦截')
		
		//设置请求头 
		config.headers['Content-Token'] = getToken() // 获取token
		return config;
	},
	function (error) {
		return Promise.reject("请求出错");
	}
);

// 拦截器,对于响应的拦截器
service.interceptors.response.use(
	function (response) {
		let code = response.data.resultCode;
		
		//登录状态token过期或者未登录
		if (parseInt(code) === 401 || parseInt(code) === 202 || parseInt(code) === 400) { // session无效
			Toast(response.data.resultMsg);
			//跳转到登录页面
			setTimeout(() => {
				router.push({
					name: 'Login'
				})
			}, 1000);
			Promise.reject(response);
		} else if (parseInt(code) === 201) {
			Toast(response.data.resultCode);
			router.push({
				name: 'Login'
			})
			Promise.reject(response);
		}
		return response;
	},
	function (error) {
		console.log(error, '请求报错')
		if (error.response) {
			switch (error.response.status) { //404，网络错误，地址有问题。
				case 405:
					Toast(error.message);
					break;
				case 404:
					Toast("访问地址错误");
					break;
				case 401:
					Toast("未登录或登录已失效");
					setTimeout(() => {
						router.push({
							name: 'login'
						})
					}, 1000);
					break;
			}
		} else {
			let errorMsg = error.message;
			if (error.message.indexOf("timeout") > -1) {
				errorMsg = "请求超时";
			}
			return Promise.resolve({ //在报错的时候传回一个正常的promise对象，错误可以交到正常处理
				data: {
					code: 1,
					msg: error.message,
					extmsg: errorMsg
				}
			});
		}
	}
);

export default service

3. 在接口文件引入axios。

import http from '@/utils/request.js';

// get请求
let getvip = (params) => {
    return http({
				method: 'get',
        url: '/system/pageByVo',
        params
    }) 
}

// post请求
let addvip = (data) => {
    return http({
        method: 'POST',
        url: '/system/pageByVo',
        data
    })
}
// post请求
let systemAdd = (data) => {
    return http({
        method: 'POST',
        url: '/system/add',
        data
    })
}
export default {
    getvip,
    addvip,
	systemAdd
}

4.在main.js文件中，挂载全局API。

import Vue from 'vue';
import App from '@/App.vue';
import Vant from 'vant';
import apis from '@/apis'
Vue.prototype.$apis = apis

5. 在页面中使用。

this.$apis.addvip({
	page: 1,
	pageSize:10
}).then((res) => {
	console.log(res, '数据')
})