Vue基礎9:非同步工具axios
阿新 • • 發佈:2018-11-13
非同步查詢資料,自然是通過ajax查詢,大家首先想起的肯定是jQuery。但jQuery與MVVM的思想不吻合,而且ajax只是jQuery的一小部分。因此不可能為了發起ajax請求而去引用這麼大的一個庫。
1、axios入門
1.1、axios的Get請求
axios.get("/item/category/list?pid=0") // 請求路徑和請求引數拼接 .then(function(resp){ // 成功回撥函式 }) .catch(function(){ // 失敗回撥函式 }) // 引數較多時,可以通過params來傳遞引數 axios.get("/item/category/list", { params:{ pid:0 } }) .then(function(resp){})// 成功時的回撥 .catch(function(error){})// 失敗時的回撥
1.2、axios的POST請求
axios.post("/user",{
name:"Jack",
age:21
})
.then(function(resp){})
.catch(function(error){})
【注意】POST請求傳參,不需要像GET請求那樣定義一個物件,在物件的params引數中傳參。post()方法的第二個引數物件,就是將來要傳遞的引數。PUT和DELETE請求與POST請求類似
2、axios的全域性配置
已經引入了axios,並且進行了簡單的封裝,在src下的http.js中:
http.js
import Vue from 'vue'
import axios from 'axios'
import config from './config.js'
// config中定義的基礎路徑是:http://api.wzy.com/api
axios.defaults.baseURL = config.api; // 設定axios的基礎請求路徑
axios.defaults.timeout = 2000; // 設定axios的請求時間
Vue.prototype.$http = axios;// 將axios賦值給Vue原型的$http屬性,這樣所有vue例項都可使用該物件
config.js
const baseUrl = 'http://api.wzy.com'
const config = {
locale: 'zh-CN', // en-US, zh-CN
url: baseUrl,
debug: {
http: false // http request log
},
api: `${baseUrl}/api`,
}
export default config
通過Vue.property.$http = axios,將axios賦值給了 Vue原型中的$http。這樣以後所有的Vue例項都可以訪問到$http,也就是訪問到了axios了。