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 => {

})