vue-cli中数据交互方式之axios

axios安装

npm install --save axios 

#使用

在main.js中 

import Vue from 'vue'
import App from './App'
import router from './router'
// import axios from 'axios'

//UI 
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';;

Vue.use(ElementUI);

Vue.protoType.$http = axios; //我一般会用$http来代替axios

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  axios,
  components: { App },
  template: '<App/>'
})

在组件中使用

this.$http.post(url,data) //请求方式 post get put delete等等
.then(res => {
    //返回的数据                
})
.catch( err=> {
    //异常捕获                
})

封装axios 

在src文件夹中新建一个api.js文件

import axios from 'axios'
import Vue from 'vue'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 请求拦截器
axios.interceptors.request.use(function(config) {
    return config;
  }, function(error) {
    return Promise.reject(error);
  })
  // 响应拦截器
axios.interceptors.response.use(function(response) {
  return response;
}, function(error) {
  return Promise.reject(error);
})

// 封装axios的post请求，get请求一样
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}

export default {
  $http(url, params) { //$http会被调用的方法名,可以按自己喜好命名
    return fetch(url, params);
  }
}

这时候在main.js中就可以不用引入axios了，如果你想在组件中使用你封装的方法

import api from './../api.js'   //路径根据实际填写

api.$http(url,data)  //post请求，因为在api.js中只封装了post的方法
.then(res => {
    
}).catch(err => {

})