vue 使用自己封裝的原生 ajax
1: 建立一個 http.js
import Vue from 'vue';
let http={}
// nginx 作為代理伺服器,解決跨域問題
// let _baseURL="vpaas"
// 用 CorsFilter 解決前臺跨域
let _baseURL = 'http://localhost:8080/';
let ContentType = "application/json";
// http.baseURL = _baseURL;
http.request = function(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = _baseURL + (opt.url || '');
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {};
// 建立ajax 物件
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 將傳入的引數轉換成一個數組物件
var params = [];
for (var key in opt.data){
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
//post 方法
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
// get 方法
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
// 讀取請求相應的狀態
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//請求成功時,執行這個函式
opt.success(xmlHttp.responseText);
}
};
}
// 態在AJAX中共有5種,分別是。
// 0 - (未初始化)還沒有呼叫send()方法
// 1 - (載入)已呼叫send()方法,正在傳送請求
// 2 - (載入完成)send()方法執行完成,
// 3 - (互動)正在解析響應內容
// 4 - (完成)響應內容解析完成,可以在客戶端呼叫了
//export與export default均可用於匯出常量、函式、檔案、模組等,
//你可以在其它檔案或模組中通過import+(常量 | 函式 | 檔案 | 模組)名的方式,將其匯入,
//以便能夠對其進行使用,但在一個檔案或模組中,export、import可以有多個,export default僅有一個。
export default http;
2: 使用