Vue axios的简单封装及全局调用方式

安装axios npm install axios --save

新建一个js文件任意取名，这里是http.js

import axios from 'axios' import { Message } from 'element-ui'; //element库的消息提示，可以不用 //创建axios实例 var service = axios.create({ baseURL: 'https://www.xx.com/v1/', timeout: 5000, headers: { 'content-type': 'application/json', "token":'14a1347f412b319b0fef270489f' } }) export default { service, //get请求 get(url, data) { return service({ url: url, method: 'get', data }) } } 

main.js中引入这个文件，做全局使用
prototype属性是JS用法，每一个构造函数都有一个属性叫做原型(prototype),默认情况下prototype属性会默认获得一个constructor(构造函数)属性

//这里是vue的主js入口文件 import Vue from 'vue' import App from './App.vue' import http from './http.js' //axios实例化后引入取名http Vue.prototype.http = http //放入全局 new Vue({ render: h => h(App) }).$mount('#app') 

组件中调用封装的axios方式：

<script> //生命周期函数 mounted (){ this.http.get('banner/1').then(res=>{ console.log(res.data) }) } </script> 

参考：http://www.ruhuashop.com