摘要：使用模擬好后端數(shù)據(jù)之后模擬數(shù)據(jù)的使用參考，就需要嘗試請求加載數(shù)據(jù)了。數(shù)據(jù)請求選擇了，現(xiàn)在都推薦使用。規(guī)定要發(fā)送到服務(wù)器的數(shù)據(jù)。布爾值，表示請求是否異步處理。要求為類型的參數(shù)，請求成功后調(diào)用的回調(diào)函數(shù)。在一個中重寫回調(diào)函數(shù)的字符串。

使用Mock模擬好后端數(shù)據(jù)之后（Mock模擬數(shù)據(jù)的使用參考：https://segmentfault.com/a/11...），就需要嘗試請求加載數(shù)據(jù)了。數(shù)據(jù)請求選擇了axios，現(xiàn)在都推薦使用axios。

axios（https://github.com/axios/axios）是基于 promise 的 HTTP 庫。如官網(wǎng)文檔介紹，npm i 之后，在需要的組件中加載就可以了。個人認(rèn)為，編碼的魅力在于，解決問題的方法不止一種，有時候這個方法在你的開發(fā)環(huán)境下ok，在我的開發(fā)環(huán)境下卻不ok，所以，問題是各式各樣的，而解決問題的方法也是百花齊放的。

npm i axios -S

在src目錄下新建apis.js文件（項(xiàng)目逐漸完善的過程中會有很有個api接口，當(dāng)然也可以命名為axios.js，命名是為了讓別人看懂），并引入：

import axios from "axios";

之后，編輯apis.js文件，考慮封裝axios.get或post請求

import axios from "axios";
const Domain = "http://localhost:8080";  // 定義根域名
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; // 設(shè)置post提交數(shù)據(jù)的格式

// 封裝 post 請求
export function post(action, params){
  return new Promise((resolve, reject) => {
    // url 判斷是測試環(huán)境 就要拿 測試環(huán)境的域名， 正式環(huán)境的就要用 正式域名
    let url = Domain + action;
    axios.post(url, params)
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  });
}

 // 封裝 get 請求

export function get(action, params){
  return new Promise((resolve, reject) => {
    axios.get(Domain + action, params)
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  });
}

export default {
  postData(action, params){
    return post(action, params)
  },
  getData(action, params){
    return get(action, params)
  }
}

 import api from "../../apis.js";
 export default {
  name: "banner",
  data() {
    return {
      bannerList: []
    };
  },
  created(){
    this.getBanner(); // 在頁面渲染完成即加載
  },
  methods: {
    getBanner(){
      this.$api.getData("/getBanner").then(val => {
        this.bannerList = val.imgs;
      });
    }
  }
}

很多組件都需要請求數(shù)據(jù)，每用一次導(dǎo)入一次很麻煩，全局配置之后就不用在組件中導(dǎo)入了。

在入口文件main.js中引入，之后掛在vue的原型鏈上：

import api from "./apis.js";
Vue.prototype.$http = api;

在組件中使用：

getBanner(){
    this.$http.getData("/getBanner").then(val => {
      this.bannerList = val.imgs;
    });
  }
  

在vuex的倉庫文件store.js中引用，使用action添加方法。action 可以包含異步操作，而且可以通過 action 來提交 mutations。action有一個固有參數(shù)context，但是 context 是 state 的父級，包含state、getters

import Vue from "Vue"
import Vuex from "vuex"
import axios from "axios"

Vue.use(Vuex)
export default new Vuex.Store({
 // 定義狀態(tài)
  state: {
    banners: {
      name: "pic"
    }
  },
  actions: {
    // 封裝一個 ajax 方法
    saveBanner (context) {
      axios({
        method: "get",
        url: "/getBanner",
        data: context.state.banners
      })
    }
  }
})

在組件中發(fā)送請求的時候，需要使用 this.$store.dispatch 來分發(fā)

methods: {
  getBananer() {
  this.$store.dispatch("saveBanner")  // actions里的方法名
  }
}

  

url: 要求為String類型的參數(shù)，（默認(rèn)為當(dāng)前頁地址）發(fā)送請求的地址。
type: 要求為String類型的參數(shù)，請求方式（post或get）默認(rèn)為get。
data：規(guī)定要發(fā)送到服務(wù)器的數(shù)據(jù)。
async：布爾值，表示請求是否異步處理。默認(rèn)是 true。
dataType: 要求為String類型的參數(shù)，預(yù)期服務(wù)器返回的數(shù)據(jù)類型。
contentType：要求為String類型的參數(shù)，當(dāng)發(fā)送信息至服務(wù)器時，內(nèi)容編碼類型默認(rèn)為"application/x-www-form-urlencoded"。
success：要求為Function類型的參數(shù)，請求成功后調(diào)用的回調(diào)函數(shù)。
error：Function類型的參數(shù)，請求失敗后調(diào)用的回調(diào)函數(shù)。
jsonp：在一個 jsonp 中重寫回調(diào)函數(shù)的字符串。

$(function(){
  $("#send").click(function(){
    $.ajax({
      type: "GET",
      url: "test.json",
      data: {username:$("#username").val(), content:$("#content").val()},
      dataType: "json",
      success: function(data){
        // handle success
      }
      error: function(data){
       // handle error
      }
      jsonp: ""
     });
   });
 });
 

當(dāng)Ajax請求的url不是本地或者同一個服務(wù)器的地址時，瀏覽器會報(bào)一個錯誤：No "Access-Control-Allow-Origin" header is present on the requested resource. Origin…………由于瀏覽器的安全機(jī)制，不能調(diào)用不同服務(wù)器下的url地址?；诖?，jQuery.ajax給出了jsonp的解決方案： 把服務(wù)器返回的數(shù)據(jù)類型設(shè)置為jsonp。

 $(function(){
  $("#send").click(function(){
    $.ajax({
      type: "GET",
      url: "test.json",
      data: {username:$("#username").val(), content:$("#content").val()},
      dataType: "jsonp",   // jsonp格式
      success: function(data){
        // handle success
      }
      error: function(data){
       // handle error
      }
      jsonp: "callback"
     });
   });
 });
 

但是，jsonp是一種非官方的方法，而且這種方法只支持get請求，不如post請求安全。此外，jsonp需要服務(wù)器配合，如果是訪問的是第三方服務(wù)器，我們沒有修改服務(wù)器的權(quán)限，那么這種方式是不可行的。

ue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發(fā)起請求并處理響應(yīng)。vue-resource體積小，支持主流瀏覽器。不過，vue2.0之后就不再更新了，尤大神推薦使用axios。

{
   // GET /someUrl
  this.$http.get("/someUrl").then(response => {
   // get body data
  this.someData = response.body;
 }, response => {
   // error callback
 });
}

全局配置post提交數(shù)據(jù)的格式：

Vue.http.options.emulateJSON = true;

全局配置根路徑：

Vue.http.options.root = "http://localhost:8080";

同樣地，由于瀏覽器的安全機(jī)制，vue-resource也面臨著跨域請求的問題。解決方案如下：在vue項(xiàng)目下的 config/index.js 文件里面配置代理proxyTable:

dev: {
    // Paths
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {    // 新增，解決跨域請求問題
      "/api": {
        target: "http://192.168.1.103:8080/",
        changeOrigin: true,
        pathRewrite: {
          "`/api": "/"
        }
      },
      secure: false
    },
    
 target中寫你想要請求數(shù)據(jù)的地址的域名
 

與vue-resource一樣，在vue項(xiàng)目下的 config/index.js 文件里面配置代理proxyTable:

 dev: {
    // Paths
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {    // 新增，解決跨域請求問題
      "/api": {
        target: "http://192.168.1.103:8080/",
        changeOrigin: true,
        pathRewrite: {
          "`/api": "/"
        }
      },
      secure: false
    },
    

不過vue-resource和axios這兩個方法，可能配置了代理proxyTable還是會報(bào)：No "Access-Control-Allow-Origin" header is present on ……的問題，這需要后端服務(wù)器配合設(shè)置：

 header("Access-Control-Allow-Origin", "*");
 header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
 

emmmm，總感覺自己還是有點(diǎn)懵 233