安装axios: npm install --save axios 目录结构:
红框部分是接口文件： appApi.js是存放接口的文件 import Vue from 'vue'import axios from 'axios'export default { // 获取分类 show_category: function () { return axios.post('/point-api-show_category'); }, // 获取商品 get_product: function (data) { return axios.post('/point-api-get_product',data); } } apiServer.js是设置vue的属性API的： import Vue from 'vue'import API from './API/appApi'Vue.prototype.API = API; 在main.js里引入axios和apiServer.js import ProtoTypeAPI from './network/apiServer'import axios from 'axios'new Vue({ el: '#app', router, store, axios, template: '<App/>', components: { App }, methods: { setSessionStorage:function(data) { for(let key in data){ sessionStorage[key] = data[key]; } }, setLocalStorage: function(data) { for(let key in data){ localStorage[key] = data[key]; } } }}) 组件里调用接口： get_product: function (name,cate_id) { this.API.get_product({ name: name, cate_id: cate_id }).then((response) => { console.dir(response); }, (response) => { mui.toast('网络错误'); }); } 设置拦截器header.js文件,引入了config.js配置文件： import Vue from 'vue'import axios from 'axios'import GLOBAL_CONFIG from './config'// 设置默认的配置项const CONFIG = GLOBAL_CONFIG['GLOBAL_CONFIG'];axios.defaults.baseURL = CONFIG['API_HOST'];//添加请求拦截器axios.interceptors.request.use(function(config){ // 获取token let TOKEN=localStorage.token; // 设置token if(TOKEN){ config.headers['X-ODAPI-Authorization'] = TOKEN; } // 返回配置项 return config;},function(error){ //请求错误时做些事 return Promise.reject(error);});//添加响应拦截器axios.interceptors.response.use(function(response){ // console.log(JSON.stringify(response)); if(response['status'] == 200){ if(response['data']['error_code'] == 0){ return response['data']['data']; }else{ if(response['data'].hasOwnProperty('erron')){ mui.toast(response['data']['erron']); } return false; } }else{ mui.toast('网络错误！'); }},function(error){ //请求错误时做些事 return Promise.reject(error);}) 配置文件config.js export default { GLOBAL_CONFIG :{ 'API_HOST': '接口地址', 'base64Header': 'data:image/png;base64,', 'dataImage':'data:image', 'db':'odoo3', } }