一、axios——vue資料請求外掛

用來請求 cross 跨域的 api 介面的外掛。

1、axios的使用

1、安裝axios：

cnpm install --save-dev axios

2、引入並使用

全域性引入並關聯、使用

main.js裡邊：

import Axios from 'axios'
Vue.prototype.$axios=Axios;

元件裡邊使用：

//元件掛載完成之後進行資料請求
mounted(){
    this.$axios
      .get("")   //請求路徑   
      .then((res) => {
	    console.log(res);   //返回的資料
	  })
      .catch((error) => {
        console.log(error);   
      })
      .finally(() => {
        console.log("最後處理");
      });
}

也可以傳送post請求並傳參，具體用法參考 npmjs 官網。

2、axios 攔截器

可以通過封裝的axios攔截器對ajax請求和響應做相應的處理，統一處理錯誤及配置請求資訊。

axios攔截器有兩種：請求攔截器 和 響應攔截器。

具體操作如下：
在src根目錄下新建檔案axios.js，內容如下：

// 封裝axios 攔截器
//引入axios
import Axios from 'axios';

//設定預設的host
Axios.defaults.baseURL = "http://www.maodou.com:8080";

//設定請求攔截器
Axios.interceptors.request.use((config) => {
    console.log(config);   //ajax請求配置
    //...在傳送請求之前做些什麼
    return config;
}, (error) => {
    //...對請求錯誤做些什麼
    return Promise.reject(error);
});

//設定響應攔截器
Axios.interceptors.response.use((response) => {
    console.log(response);
    //可以對資料做處理
    return response;
}, (error) => {
    //對響應錯誤做些什麼
    return Promise.reject(error);
});

在main.js中進行引入：

//全域性引入
import Axios from 'axios'
import './Axios/axios';
Vue.prototype.$axios=Axios;

在元件中使用：
使用的時候 url 寫半路徑，因為請求攔截器裡邊已經設定過 baseURL。

    this.$axios({
      method: "get",
      url: "/user",
    })
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });

二、fetch-jsonp

用來請求 jsonp 跨域的 api 介面 的外掛。

JSONP only supports GET method, same as fetch-jsonp.

1、fetch-jsonp 的使用

1、安裝fetch-jsonp

cnpm install --save-dev fetch-jsonp

2、全域性引入 fetch-jsonp，並關聯到vue原型上：

//引入fetch-jsonp
import Fetch  from 'fetch-jsonp'
Vue.prototype.$fetch=Fetch;

3、在元件中使用

    this.$fetch("/", {
      jsonpCallback: "getData", //設定jsonp的回撥函式名稱
      timeout: 2000,
    })
      .then((res) => {
        return res.json(); //第一個then是固定的
      })
      .then((res) => {
        console.log(res); //返回的資料
      })
      .catch((error) => {
        console.log(error); //抓異常
      });

2、fetch 攔截器

axios有自己的攔截器方法，可以直接調方法；fetch-jsonp 沒有，可以通過類來封裝。

實現程式碼參考