1、ajax.js 封装axios
import axios from 'axios'
import qs from 'qs'
// 请求拦截器和响应拦截器也写在这个文件里,根据需要和项目要求写
export default function ajax(url ,data = {} ,type = 'GET'){
return new Promise(function(resolve,reject){
let promise
if(type === 'GET') {
let urlStr
if(data != '{}') {
urlStr = url + '?' + qs.stringify(data)
}else {
urlStr = url
}
let token = localStorage.getItem('token')
promise = axios.get(urlStr,{
headers:{'apiauth':token}
})
}else if (type === 'POST') {
let token = localStorage.getItem('token')
promise = axios.post(url,qs.stringify(data),{
headers:{
'Content-Type':'application/x-www-form-urlencoded',
'apiauth':token
}
})
}
promise.then(function(response){
resolve(response)
}).catch(function(error){
reject(error)
})
})
}
2、serviceUrl.js开发环境和生产环境的接口地址
let host = ''
if(process.env.NODE_ENV === 'development') {
// 开发环境
host = 'localhost:3001'
}else if(process.env.NODE_ENV === 'production') {
host = 'http://xxxx.com'
}
export {
host
}
3、api.js 所有的接口请求方法
import ajax from './ajax'
import {host} from './serviceUrl'
// let baseURL = 'localhost:8080'
export const login = ({name,password}) => ajax(`${host}/index/login`,{name,password},'GET')
4、 main.js 挂载在vue原型上
import Vue from 'vue'
import * as Api from './common/api'
// 由于使用export暴露多个方法,这里要将多个方法引入,使用import * as xxx from xxx 将所有暴露出来的引入成一个对象
Vue.prototype.$api = Api
5、在组件中使用
<script>
export default {
data () {
return {
}
},
mounted(){
this.login()
},
methods:{
async login(){
let name = 'lisan'
let password = '123456'
let res = await this.$api.login({name,password})
console.log(res)
}
}
}
</script>