vue axios api 集中管理

来，我们先安装axios

npm install axios

再来，建好api文件目录及js文件

我们在request 里面写上如下代码

import axios from 'axios'
import Qs from 'qs' //数据转译
const baseUrl = 'http:------';  //接口地址

export default (
	method,
	url,
	data
) => {
	return new Promise((resolve, reject) => {
		axios({
			url: baseUrl + url,
			header: {
				"x-token": '11'
			},
			method,
			data: Qs.stringify(data),
		})
		.then(res => {
			resolve(res)  //请求成功的数据在这里返回
		})
		.catch(res => {
			reject(res)  //没有请求成功的错误信息在这里捕获
		})
	})
}

第一层封装就好了，可以直接用了，但是如果打算要把所有的api集中在一个js文件里面的话，还需进一步封装
再来看api.js文件写上如下代码：

import api from './request.js'

export const login= (params) => {
	return request('GET', '/credit/getCode', params)
}

一个export就是一个api接口了，这个时候已经可以用了，这时候这样用

使用如下：

import {login} from "api"
async test () {
	let res = login({id:2})
}

这种情况有个问题就是每个页面都得去引入一次，我们把它再封装一下：
新建一个js文件，我这叫exports.js，写上如下代码

import * as api from './logins';
export default api

然后再到main.js中引入

import api from "./exports"
Vue.prototype.$http = api

然后就可以在页面直接用了：

async test () {
	let res = this.$http.login()
}

就是这样