axios基本入門用法教程
這篇文章主要給大家介紹了axios基本入門用法教程,下面話不多說(shuō),來(lái)看看詳細(xì)的介紹吧。
首先就是引入axios,如果你使用es6,只需要安裝axios模塊之后
import axios from 'axios'; //安裝方法 npm install axios //或 bower install axios
當(dāng)然也可以用script引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios提供了一下幾種請(qǐng)求方式
axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
這里的config是對(duì)一些基本信息的配置,比如請(qǐng)求頭,baseURL,當(dāng)然這里提供了一些比較方便配置項(xiàng)
//config
import Qs from 'qs'
{
//請(qǐng)求的接口,在請(qǐng)求的時(shí)候,如axios.get(url,config);這里的url會(huì)覆蓋掉config中的url
url: '/user',
// 請(qǐng)求方法同上
method: 'get', // default
// 基礎(chǔ)url前綴
baseURL: 'https://some-domain.com/api/',
transformRequest: [function (data) {
// 這里可以在發(fā)送請(qǐng)求之前對(duì)請(qǐng)求數(shù)據(jù)做處理,比如form-data格式化等,這里可以使用開(kāi)頭引入的Qs(這個(gè)模塊在安裝axios的時(shí)候就已經(jīng)安裝了,不需要另外安裝)
data = Qs.stringify({});
return data;
}],
transformResponse: [function (data) {
// 這里提前處理返回的數(shù)據(jù)
return data;
}],
// 請(qǐng)求頭信息
headers: {'X-Requested-With': 'XMLHttpRequest'},
//parameter參數(shù)
params: {
ID: 12345
},
//post參數(shù),使用axios.post(url,{},config);如果沒(méi)有額外的也必須要用一個(gè)空對(duì)象,否則會(huì)報(bào)錯(cuò)
data: {
firstName: 'Fred'
},
//設(shè)置超時(shí)時(shí)間
timeout: 1000,
//返回?cái)?shù)據(jù)類型
responseType: 'json', // default
}
有了配置文件,我們就可以減少很多額外的處理代碼也更優(yōu)美,直接使用
axios.post(url,{},config)
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
})
//axios請(qǐng)求返回的也是一個(gè)promise,跟蹤錯(cuò)誤只需要在最后加一個(gè)catch就可以了。
//下面是關(guān)于同時(shí)發(fā)起多個(gè)請(qǐng)求時(shí)的處理
axios.all([get1(), get2()])
.then(axios.spread(function (res1, res2) {
// 只有兩個(gè)請(qǐng)求都完成才會(huì)成功,否則會(huì)被catch捕獲
}));
最后還是說(shuō)一下配置項(xiàng),上面講的是額外配置,如果你不想另外寫也可以直接配置全局
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//當(dāng)然還可以這么配置
var instance = axios.create({
baseURL: 'https://api.example.com'
});
本文只是介紹基本的用法,詳細(xì)看官方文檔:https://github.com/axios
兩個(gè)例子分享給大家:
使用vue2.0+mintUI+axios+vue-router:https://github.com/Stevenzwzhai/vue-mobile-application
使用vue2.0+elementUI+axios+vue-router:https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例
這篇文章主要為大家介紹了javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
回車直接實(shí)現(xiàn)點(diǎn)擊某按鈕的效果即觸發(fā)單擊事件
這篇文章主要介紹了回車直接實(shí)現(xiàn)點(diǎn)擊某按鈕的效果即觸發(fā)單擊事件,需要的朋友可以參考下2014-02-02
javascript實(shí)現(xiàn)控制瀏覽器全屏
這篇文章主要介紹了javascript實(shí)現(xiàn)控制瀏覽器全屏的代碼分享給大家,十分的實(shí)用,有需要的小伙伴可以參考下。2015-03-03
深入理解ES6學(xué)習(xí)筆記之塊級(jí)作用域綁定
本篇文章主要介紹了深入理解ES6學(xué)習(xí)筆記之塊級(jí)作用域綁定,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08

