axios常見的使用方法(精選)
Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
- 瀏覽器中建立 XMLHttpRequests
- node.js 建立 http 請求
- 支援 Promise API
- 攔截請求和響應
- 轉換請求資料和響應資料
- 取消請求
- 自動轉換 JSON 資料
- 客戶端支援防禦 XSRF
安裝
使用npm安裝
npm install axios
使用bower安裝
bower install axios
使用CDN (線上文件)
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
事例:
vue中全域性使用
1.結合 vue-axios使用
看了vue-axios的原始碼,它是按照vue外掛的方式去寫的。那麼結合vue-axios,就可以去使用vue.use方法了
首先在主入口檔案main.js中引用:
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
在元件檔案中的methods裡去使用了:
getNewsList(){
this.axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
}
2.axios 改寫為 Vue 的原型屬性
首先在主入口檔案main.js中引用,然後掛在vue的原型鏈上:
import axios from 'axios'
Vue.prototype.$ajax= axios
在元件中使用:
this.$ajax.get('api/getNewsList')
.then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
區域性使用
引入axios
import axios from 'axios'
常用的配置項初始化
// 常規配置項
axios.defaults.baseURL = 'https://127.0.0.1:9999'; // 請求伺服器具體的地址
axios.defaults.withCredentials =true; // 在跨域中允許攜帶憑證
axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded';// 宣告傳給伺服器的資料,通過請求傳給伺服器的資料application/x-www-form-urlencoded格式
axios.defaults.headers.common["token"] = token; // 攜帶token請求頭
// 請求攔截器:當我們通過porps請求向伺服器發請求的時候,能攔截到請求主體資訊,然後把請求主體傳遞進來的json格式的物件,變成urlencoded 某某某等於&某某某格式傳送給伺服器
axios.defaults.transformRequest = function (data) {
if (data) return data;
let result = ``;
for (let attr in data) {2
if(!data.hasOwnProperty(attr)) break;
result += `&${attr}=${data[attr]}`;
}
return result.substring(1);
};
// 響應伺服器:接受伺服器返回的結果,把返回的結果,因為它的anshuosi從伺服器獲得的結果response物件當中包含了很多資訊,既有響應頭也有相應主體的資訊,xx配置資訊。
// 現在只拿到data,如果有錯誤就丟擲錯誤的Promise,
axios.interceptor.response.use(function onFultfilled(response) {
// 成功走這個
return response.data;
}, function onRejected(reason) {
// 失敗走這個
return Promise.reject(reason);
});
// 驗證什麼時候成功失敗,用正則檢驗,自定義成功失敗,主要以http狀態碼
axios.dafaults.validateStatus = function (status) {
// http狀態碼,2或者3開頭的都是成功,預設只有2開頭的才能成功
return /^(2\3)\d{2}$/.test(status);
}
使用方式示例
1.執行get資料請求
axios.get('url',{
params:{
id:'介面配置引數(相當於url?id=xxxx)',
},
})
.then((res)=>{
console.log(res); // 處理成功的函式 相當於success
})
.catch((error)=>{
console.log(error) // 錯誤處理 相當於error
})
2.執行post資料傳送
const data = {
name:'張三',
age:23
}
axios.post('url',data)
.then((res)=>{
console.log(res); // 處理成功的函式 相當於success
})
.catch((error)=>{
console.log(error) // 錯誤處理 相當於error
})
3.執行delete 資料傳送
// 如果服務端將引數作為java物件來封裝接受
axios.delete('demo/url', {
data: {
id: 123,
name: 'Henry',
},
timeout: 1000,
})
// 如果服務端將引數作為url引數來接受,則請求的url為:www.demo/url?a=1&b=2形式
axios.delete('demo/url', {
params: {
id: 123,
name: 'Henry',
},
timeout: 1000
})
4.執行put 資料傳送
axios.put('demo/url', {
id: 123,
name: 'Henry',
sex: 1,
phone: 13333333
})
5.攜帶請求頭
axios設定請求頭中的Authorization資訊:
GET請求
this.$axios.get('/url',
{
headers: {
'Authorization': 'Bearer '+localStorage.getItem('token'),
'token': ' '
...
},
params: {
param1: string,
param2: string
},
...
}
)
.then(res => fn)
.catch(err => fn)
相關文章
- 前端開發常見問題精選(五)前端
- axios的一些常見用法iOS
- axios baseURL 的使用方法iOS
- Github使用方法及常見錯誤Github
- jQuery中$.each()常見使用方法有哪些jQuery
- python re模組常見使用方法整理Python
- 常見的nginx的配置選項Nginx
- axios 攔截器 的使用方法iOS
- CSS 常見選擇器CSS
- MySQL常見面試題總結[精讀]MySql面試題
- 牛客堂常見面試題精講(一)1面試題
- vue-axios的總結及專案中的常見封裝方法。VueiOS封裝
- 必讀:常見場景的加密選擇加密
- CSS選擇器常見問題CSS
- web伺服器的作用及常見選擇Web伺服器
- 關於axios以及jsonp的簡單使用方法iOSJSON
- 淺談常見的NoSQL技術方案和選型SQL
- 常見的webshell工具,你會選擇哪一個?Webshell
- Python選擇語句常見的三種形式!Python
- 11月13日雲棲精選夜讀|一線網際網路常見的14個Java面試題Java面試題
- Gvim學習記錄3--常見外掛NERD Commenter的使用方法
- Path實現常見toolbar點選彈出選單效果
- Jupyter 常見視覺化框架選擇視覺化框架
- Golang 常見設計模式之選項模式Golang設計模式
- 精選的 Go 框架,庫和軟體的精選清單Go框架
- [jvm]常見的oom異常JVMOOM
- 常見的三種排序演算法(選擇,冒泡,計數)排序演算法
- AOSP常見的命令
- 常見的DOS命令
- 常見的DOM操作
- 常見的佈局
- 常見的埠號
- 常見的UI框架UI框架
- JavaScript 的常見“陷阱”JavaScript
- css常見的概念CSS
- 常見暫存器以及常見彙編指令,常見爆破指令 goodGo
- Linux運維常見筆試題(選擇題)Linux運維筆試
- javaWeb常見異常的解決方法JavaWeb