視頻資源來自：b站coderwhy王紅元老師——最全最新Vue迫摔、Vuejs教程翠胰，從入門到精通
文章僅為個人觀看視頻后的學(xué)習(xí)心得筆記蒿往，用于個人查看和記錄保存鸣峭。文中定有疏漏錯誤之處渴肉，懇請指正幽七。
JSONP
對不起。我不會离福。沒學(xué)過
axios
特點(diǎn)：在瀏覽器中發(fā)送 XMLHttpRequests 請求杖狼，在 node.js 中發(fā)送 http請求，支持 Promise API妖爷，攔截請求和響應(yīng)蝶涩，轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)，等
axios請求方式：
axios(config)
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]])
下載：npm install axios@0.18.0 --save
網(wǎng)絡(luò)封裝絮识、模擬測試可以用httpbin.org
<font color=#909534>跨域：域名绿聘、端口、協(xié)議三者任一不同次舌，就是不同域熄攘，請求不同域的數(shù)據(jù)就是跨域</font>
前端一共可以在4個地方給后端傳參數(shù)：路徑、查詢參數(shù)彼念、請求頭挪圾、請求體
axios({
method:'PUT',
url:'/products/'+100,
params:{
page:1,
perPage:10,
},
headers:{
'X-Hahaha':'666',
},
data:{
name:1,
sex:2,
}
})
對應(yīng)后端↓
request.headers['X-Hahaha']//666
request.body.name//1
request.query.page//1
request.params.id//100
發(fā)送基本請求
get
axios請求的兩種方式：post↓
axios({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'post'
}).then(res =>{
console.log(res)
})
axios.post()
傳數(shù)
axios({
url: 'http://123.207.32.32:8000/home/multidata',
params: {
type: 'pop',
page: 1
}
})
等價于
axios({
url: 'http://123.207.32.32:8000/home/multidata?type=pop&page=1'
})
并發(fā)all
全局配置
axios.defaults.baseURL = 'http://152.136.185.210:7878/api/m5'
axios.defaults.timeout = 5000
axios.all([axios({
url:'/home/multidata'
}),axios({
url:'/home/data',
params: {
type: 'sell',
page: 5
}
})])
常見的配置選項
axios實例
const instancel = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
instancel({
url: '/home/multidata'
}).then(res =>{
console.log(res);
})
封裝
axios不支持了以后也可以方便地更改
最終最終封裝極致優(yōu)雅方案：
創(chuàng)建network/request.js
import axios from "axios";
export function request(config) {
return new Promise((resolve,reject) =>{
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
//發(fā)送真正網(wǎng)絡(luò)請求
return instance(config)
})
}
main.js調(diào)用
import {request} from "./network/request";
request({
url: '/home/multidata'
}).then(res =>{
console.log(res);
}).catch(err =>{
console.log(err);
})
<font color=#909534>回調(diào)</font>
funciton test(a,b){
用a、b進(jìn)行各種操作
}
使用函數(shù)時
test(參數(shù)逐沙，參數(shù))
當(dāng)參數(shù)是一個函數(shù)時
test(function (res){},function (err){});
攔截器
//2.axios的攔截器
instance.interceptors.request.use(aaa =>{
console.log(aaa);
return aaa
},err =>{
console.log(err);
});
請求攔截
instance.interceptors.request.use( , )
2.1比如config中的一些信息不符合服務(wù)器的邀請
2.2比如每次發(fā)送網(wǎng)絡(luò)請求時哲思，都希望在節(jié)目中顯示一個請求的圖標(biāo)
2.3某些網(wǎng)絡(luò)請求（比如登陸（token）），必須攜帶一些特殊的信息
響應(yīng)攔截
instance.interceptors.response.use( , )
總目錄：
邂逅Vuejs
Vue基礎(chǔ)語法
組件化開發(fā)
前端模塊化
webpack詳解
Vue CLI詳解
vue-router
Promise的使用
Vuex詳解
網(wǎng)絡(luò)模塊封裝
項目實戰(zhàn)
