axios獲取數據接口

 

vue.js默認沒有提供ajax功能的。

所以使用vue的時候，一般都會使用axios的插件來實現ajax與后端服務器的數據交互。

注意，axios本質上就是javascript的ajax封裝，所以會被同源策略限制。

下載地址：

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

axios提供發送請求的常用方法有兩個：axios.get() 和 axios.post() 。

增 post

刪 delete

改 put/patch

查 get

 

// 發送get請求
// 參數1: 必填，字符串，請求的數據接口的url地址，例如請求地址：http://www.baidu.com?id=200
// 參數2：可選，json對象，要提供給數據接口的參數
// 參數3：可選，json對象，請求頭信息
axios.delete('服務器的資源地址',{ // http://www.baidu.com
params:{
參數名:'參數值', // id: 200,
},
headers:{
responseData:"json",
}

}).then(function (response) { // 請求成功以后的回調函數
console.log("請求成功");
console.log(response);

}).catch(function (error) { // 請求失敗以后的回調函數，如果then有語法錯誤的話，這里也會被執行
console.log("請求失敗");
console.log(error.response);
});

// 發送post請求，參數和使用和axios.get()一樣。
// 參數1: 必填，字符串，請求的數據接口的url地址
// 參數2：必填，json對象，要提供給數據接口的參數,如果沒有參數，則必須使用{}
// 參數3：可選，json對象，請求頭信息
axios.post('服務器的資源地址',{
username: 'xiaoming',
password: '123456'
},{
responseData:"json",
})
.then(function (response) { // 請求成功以后的回調函數
console.log(response);
})
.catch(function (error) { // 請求失敗以后的回調函數
console.log(error);
});

// b'firstName=Fred&lastName=Flintstone'