Vue配置axios,实现接口封装和对接

前言：今天学习配置vue的axios实现接口整理和对接，搞不明白，最后在大佬的帮助下（代写下）整理明白了，所以整理一下。axios如何和后台接口对接上。

在vue 项目里配置axios,关于vue的配置之前写过链接: vue3.0 安装项目环境node.js 和 vue-cli配置详解.

1. 直接在项目终端里 npm install axios -S ，我用的cnpm install axios -S

然后安装之后，我的项目里node_modules里就多出了一个axios的文件，这时候就不要去管它，开始下一步。

1：先在src下创建一个config.js，我们配置基础路径：

const env = 'prod'

const apiBaseUrl = {
  dev: 'http://111.111.1111/',
  //你自己的项目路径
  prod: 'http://111.111.1111/'
}

export const Config = {
  apiBaseUrl: apiBaseUrl[env]
}

2：接着在src下新建一个newwork.js的文件，引入config.js 这些代码直接复制过去就行啦，除了路径自己改一下，如果axios显示没找到，说明你安装的有问题，或者是路径不大对，自己排查一下，。

import axios from 'axios';
import {Config} from './config.js';
const Service = axios.create({
	responseType: 'json',
	headers: {
		'Content-Type': 'application/json;charset=utf-8',
	},
	withCredentials: false,
});
Service.interceptors.request.use(
	config => {
		if (config.method === 'get') {
			config.params = {
				...config.data
			};
		}
		return config;
	},
	error => {
		return Promise.reject(error);
	},
);
Service.interceptors.response.use(
	response => {
		return Promise.resolve(response);
	},
	error => {
		return Promise.reject(error.response);
	},
);

const ajax = (url, data, method = 'post') => {
	return new Promise((resolve, reject) => {
		const option = {
			url: url,
			method: method,
			data,
		};

		Service(option).then(r => {
			resolve(r.data);
		}).catch(e => {
			reject(e);
		});
	});
};

export const post = (url, data) => {
	url = Config.apiBaseUrl + url;

	return ajax(url, data, 'post');
};

export const get = (url, data) => {
	url = Config.apiBaseUrl + url;

	return ajax(url, data, 'get');
};

3:新建一个apiServer.js，这个js用来统一存放接口方法，统一调用。首先引入network.js里的get 或者post方法

import {get} from './network.js'

export const ApiService = {
	getSvgDate: (data) => {
		const url = 'niming/nimingjiekou';
		return get(url, data);
	}
}

4.在页面上调用

<template>
	<div @click="backlog()">点击调用接口</div>
</template>

<script>
	// 引用apiServer抛出的ApiService
	import {
		ApiService
	} from './apiServer.js'

	export default {
		methods: {
			backlog() {
				//使用ApiService里的getSvgDate方法
				ApiService.getSvgDate({
					zhi:qingqiu,
				}).then(res => {
					//内容
				})
			}
		}
	}
</script>

然后运行到浏览器就可成功调用啦~