axios特點

1.從瀏覽器中建立 XMLHttpRequests
2.從 node.js 建立 http 請求
3.支援 Promise API
4.攔截請求和響應 （就是有interceptor）
5.轉換請求資料和響應資料
6.取消請求
7.自動轉換 JSON 資料
8.客戶端支援防禦 XSRF

安裝axios和qs

npm i axios --save

引入axios

import axios from 'axios'

新建一個util資料夾（只要存放工具類）

1、在util中建一個request.js 檔案  （主要存放所有請求，get,post等）

// request.js
import axios from 'axios';

// post請求
function postRequest(url, data = {}, method = 'post') {
    return new Promise((resolve, reject) => {
        axios({
                url: url,
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                },
                data: data
            })
            .then(res => {
                //成功
                resolve(res.data)
            })
            .catch(res => {
                //失敗
                reject(res)
            })

    })
}

export default {
    postRequest: postRequest
}

2、在util資料夾中，新建一個api.js (主要存放介面檔案)

下面簡單寫一個獲取輪播圖的 介面

//api.js

import requestAll from './request.js';

const apiUrl = '域名'
const webUrl = '域名
const baseUrl = apiUrl + '?act='

const api= {
    
    //獲取url補充靜態資源
    getUrl(){
        return webUrl;
    },

  //獲取輪播圖
  getBanner(session,language){
      let data = {
          session,
          language
      }
      return requestAll.postRequest(apiUrl + 'portal/index/top_banner', data);
  },
}
 
export default api

3、在vue的main.js檔案中定義api屬性 （既是api暴露的介面）

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

Vue.config.productionTip = false

//定義api屬性

import api from './util/api'
Vue.prototype.$api = api

new Vue({
    el: '#app',
    router,
    components: {
        App
    },
    template: '<App/>'
})

4、在index.vue中呼叫api請求介面

在method中呼叫

methods: {
         
            getMsg(){
                    var that = this;
                    this.$api.getBanner('fd5ce00d2ced178b731a1e11d00c8c27','korea')
                        .then(res =>{
                            console.log(res);
                            if(res.code == 200){
                                for(var x in res.data){
                                    res.data[x].image = that.$api.getUrl() + res.data[x].image;
                                }
                                
                                that.banner = res.data;
                            }
                        })
                        .catch(res =>{
                            console.log(res)
                        })
            }
            
            
        }

這樣就可以呼叫封裝好的 axios了 ，自己摸索的 ，寫的不好  勿噴！