請求方式
很多種請求方式，重點還是第一種吧
下載
npm install axios --save
下載完成
直接匯入
import axios from 'axios'
簡單配置
axios({
url: 'http://'
}).then(res => {
console.log(res);
})
併合請求
//並和請求
axios.all([
axios({
url: "http://123.207.32.32:8000/home/multidata"
}),
axios({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'get',
params: {
type: 'pop',
page: 3 }
})
// 就是物件的解構
]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
全域性配置
axios.defaults.baseURL = "http://123.207.32.32:8000" 地址
axios.defaults.timeout = 5000 超時時間
請求配置
axios.all([
axios({
url: "/home/multidata"
}),
axios({
url: '/home/multidata',
method: 'get',
params: {
type: 'pop',
page: 3 }
})
// 就是物件的解構
]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
常見的配置選項
get 傳 params
post 傳 data
axios 例項
解釋
有些時候url地址的ip可能會不同
那麼就會出現多個baseURL和多個axios
這個時候就是創axios例項，不同的例項就可以配置不同的url 使用不同的 axios
// 創造axios例項instance1
const instance1 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 然後就可以使用這個例項axios(instance1)進行使用
instance1({
url: "/home/multidata"
}).then(res => {
console.log(res);
}) // 創造axios例項instance1
const instance2 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 然後就可以使用這個例項axios(instance2)進行使用
instance2({
url: '/home/multidata',
method: 'get',
params: {
type: 'pop',
page: 3
}
}).then(res => {
console.log(res);
})
這樣寫在main.js就是太多太麻煩
然後我們直接寫在元件裡的create（）{}中，每次重新建立一個元件就呼叫axios，但是每個元件都寫，又是太過於麻煩。
這是個危險的行為，如果有一天axios下架了那麼專案裡的的每個地方都要改，工作量可想而知。
於是我們有思路：
那一天axios沒用了我們就直接改我們自己封裝的三方外掛檔案
第一種：
建立一個request.js檔案
import axios from 'axios'
export function request(config, success, failure) {
//1。建立axiso的例項
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//傳送真正的網路請求
instance(config)
.then(res => {
// console.log(res);
success(res)
})
.catch(err => {
// console.log(err);
failure(err)
})
}
在main.js檔案裡
// 5.封裝request模組
import { request } from './network/request.js' request({
url: "/home/multidata"
}, res => {
console.log(res);
}, err => {
console.log(err);
})
這個封裝還是有些問題，我們可以不用三個引數嗎？直接用一個物件包三個變數就行，我們繼續改進
第二種：
export function request(config) {
//1。建立axiso的例項
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//傳送真正的網路請求
instance(config.baseConfig)
.then(res => {
// console.log(res);
config.success(res)
})
.catch(err => {
// console.log(err);
config.failure(err)
})
}
request({
baseConfig: {
url: "/home/multidata"
},
success: res => {
console.log(res);
},
failure: err => {
console.log(err);
}
})
第三種
因為是請求函式所以我們直接Promise
export function request(config) {
return new Promise((resolve, reject) => {
//1。建立axiso的例項
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//傳送真正的網路請求
instance(config)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
request({
url: "home/multidata",
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
第四種 終極方案
因為 instance就是axios本身就是一個Promise所以直接return
export function request(config) {
//1。建立axiso的例項
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//傳送真正的網路請求
return instance(config)
}
request({
url: "home/multidata",
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
axios攔截器
請求攔截：
instance.interceptors.request.use(config => {
console.log(config);
// 1.config中的一些資訊不符合伺服器的要求
// 2.每次請求時顯示動畫 請求成功隱藏
// 3.當登陸時，如果沒有攜帶token就攔截請求，提示去登入
return config
})
頁面列印：
所以攔截了一定要return攔截內容
響應攔截
instance.interceptors.response.use(res => {
console.log(res);
}, err => {
console.log(err);
}）
頁面列印
所以也一定要return
axios 結束！！！！！！！！！！！！！！！！！！！！！