文章目錄
- 前言
- 一、常見的網路請求模塊,以及優缺點對比.
- 二、axios請求方式
- 2.1 安裝axios
- 2.2axios基本使用
- 2.3 axios-發送并請求 處理并發請求
- 2.4 axios全域配置
- 2.5 axios的實體和封裝
- 2.6 axios的攔截器使用
- 總結
前言
感謝coderwhy-王紅元 老師.
上善若水,澤被后世.
提示：以下是本篇文章正文內容，下面案例可供參考
一、常見的網路請求模塊,以及優缺點對比.
常見的網路請求模塊，以及優缺點對比，
JSONP的原理和封裝
JSONP原理回顧
JSONP請求封裝
axios的內容詳解
認識axios網路模塊
發送基本請求
axios創建實體
axios攔截器的使用
vue中發送網路請求如何選擇?
選擇一:傳統的Ajax是基于XMLHttpRequest(XHR)為什么不用它呢?
非常好解釋,配置和呼叫方式等非常混亂.>編碼起來看起來就非常蛋疼.
所以真實開發中很少直接使用,而是使用jQuery-Ajax
選擇二:在前面的學習中,我們經常會使用jQuery-Ajax
相對于傳統的Ajax非常好用.
為什么不選擇它呢?
首先,我們先明確一點:在Vue的整個開發中都是不需要使用jQuery了.
那么,就意味著為了方便我們進行一個網路請求,特意參考一個jQuery,你覺得合理嗎?
jQuery的代碼:1w+行.
Vue的代碼才1w+行.
完全沒有必要為了用網路請求就參考用這個重量級的握架;
選擇三:官方在Vue1.x的時候推出了Vue-resource.
Vue-resource的體積相對于jQuery小很多.另外Vue-resource是官方推出的.
為什么不選擇它呢?
在Vue2.0退出后, Vue作者就在GitHub的Issues中說明了去掉vue-resource,并且以后也不會再更新.
那么意味著以后vue-reource不再支持新的版本時,也不會再繼續更新和維護.對以后的專案開發和維護都存在很大的隱患.
二、axios請求方式
2.1 安裝axios
npm install axios --save
2.2axios基本使用
方式一:
代碼如下（示例）：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";
createApp(App).use(store).use(router).mount('#app')
//默認get請求
axios ({
url: 'http://123.207.32.32:8000/home/multidata'
}).then( res => {
console.log(res);
})
該處使用的url網路請求的資料，
2.3 axios-發送并請求 處理并發請求
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";
createApp(App).use(store).use(router).mount('#app')
//axios-發送并請求 處理并發請求
axios.all([axios({
url: 'http://123.207.32.32:8000/home/multidata'
}), axios({
url: 'http://123.207.32.32:8000/home/data',
params: {
type: 'sell',
page: 5
}
})]).then(results => {
console.log(results)
})
2.4 axios全域配置
在上面的示例中,我們的BaseURL是固定的
事實上,在開發中可能很多引數都是固定的且多次呼叫的.
這個時候我們可以進行一些抽取,也可以利用axios的全域配置
代碼示例-全域配置baseURL,timeout:
axios.defaults.baseURL ='http://123.207.32.32:8000'
axios.defaults.timeout = 5000
2.5 axios的實體和封裝
避免過度依賴第三方框架.
import axios from "axios";
export function request(config) {
//1.創建axios實體
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//發送網路請求
return instance(config)
}
2.6 axios的攔截器使用
import axios from "axios";
export function request(config) {
//1.創建axios實體
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//2.axios的攔截器
//請求時攔截
axios.interceptors.request.use(config => {
console.log(config)
// 1.比如config中的一些資訊不符合服務器的要求
//2.比如每次發送網路請求時，都希望在界面中顯示一個請求的圖示
// 3.某些網路請求(比如登錄(token))，必須攜帶一些特殊的資訊
return config
}, err => {
console.log(err)
});
//回應時攔截
axios.interceptors.response.use(res => {
console.log(res)
return res.data
},err => {
console.log(err)
});
//3.發送網路請求
return instance(config)
}
總結
本文對axios做了簡單使用總結.他是基于ajax封裝完成的.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294243.html
標籤：其他