安裝與使用
安裝：
npm install --save axios
使用：
import axios from 'axios'
一槐臀、請求類型
get、delete方式類似都可以用params請求粉渠，delete可以在請求體中請求，post、put撒璧、patch類似都是使用請求體請求并且可以有json/form-data兩種方式
GET
get請求的兩種寫法 (使用config 將參數(shù)放在params中)
axios.get('/url', {
params: {
id: 12
}
}).then((res) => {
console.log(res)
})
//另外一種寫法
axios({
method: 'get',
url: '/url',
params: {
id: 12
}
}).then(res => {
console.log(res)
})
POST
post請求 (將參數(shù)放在請求體中)群扶，兩種方式json/form-data
// applicition/json
let data = {
id: 12
}
axios.post('/url', data).then(res => {
console.log(res)
})
axios({
method: 'post',
url: '/post',
data: data
})
// form-data 表單提交（圖片上傳及刻，文件上傳）
let formData = new FormData()
for (let key in data) {
formData.append(key, data[key])
}
axios.post('/url', formData).then(res => {
console.log(res)
})
PUT
put 請求 (將參數(shù)放在請求體中)，兩種方式json/form-data
// put請求
axios.put('/put',data).then(res=>{
console.log(res)
})
PATCH
patch請求 (將參數(shù)放在請求體中)竞阐，兩種方式json/form-data
// patch請求
axios.patch('/patch',data).then(res=>{
console.log(res)
})
DELETE
delete (將參數(shù)放在請求體中 也可以將參數(shù)放在params中)
// delete請求
axios.delete('/delete', {
params: {
id: 12
}
})
axios.delete('/delete', {
data: {
id: 12
}
})
二缴饭、并發(fā)請求
并發(fā)請求：同時進行多個請求，并統(tǒng)一處理返回值
axios.all(
[
axios.get('/data.json'),
axios.get('/city.json')
]
).then(
axios.spread((dataRes, cityRes) => {
console.log(dataRes, cityRes)
})
)
三骆莹、axios實例
使用場景： 后端接口地址有多個颗搂，并且超時時長不一樣或者業(yè)務邏輯不同
axios.create({
baseURL: 'http://localhost:8080', // 請求的域名，基本地址
timeout: 1000, // 請求超時時長（ms）
url: '/data.json', //請求路徑
method: 'get,post,put,patch,delete', // 請求方法
headers: {
token: ''
}, // 請求頭
params: {}, //請求參數(shù)拼接在url上
data: {}, //請求參數(shù)放在請求體
})
配置
全局配置幕垦、實例配置丢氢、請求配置
優(yōu)先級：全局配置<實例配置<請求配置
// 1.axios全局配置
axios.defaults.timeout =1000
axios.defaults.baseURL = 'http://localhost:8080'
// 2.axios實例配置
let instance = axios.create()
instance.defaults.timeout = 3000
// 3.axios請求配置
instance.get('/data.json',{
timeout:5000
})
四傅联、攔截器
攔截器：在請求或響應被處理前攔截他們
請求攔截器的用法
// 請求攔截器
axios.interceptors.request.use(config => {
// 在發(fā)送請求前做些什么
return config
}, err => {
// 在請求錯誤的時候做些什么
return Promise.reject(err)
})
響應攔截器的用法
// 響應攔截器
axios.interceptors.response.use(res => {
// 請求成功對響應數(shù)據(jù)做處理
return res
}, err => {
// 響應錯誤做些什么
return Promise.reject(err)
})
取消攔截器
let interceptors = axios.interceptors.request.use(config => {
config.headers = {
auth: true
}
return config
})
axios.interceptors.request.eject(interceptors)
五、錯誤處理與取消處理
錯誤處理：在攔截器中用err疚察，如果某請求后面需要單獨處理錯誤蒸走，則使用catch()
// 例子：實際開發(fā)過程中，一般添加統(tǒng)一錯誤處理
let instance = axios.create({})
instance.interceptors.request(config => {
return config
}, err => {
// 請求錯誤 一般http狀態(tài)碼以4開頭貌嫡，常見：401超時比驻，404 not found
$('#modal').show()
setTimeout(() => {
$('#modal').hide()
}, 2000)
return Promise.reject(err)
})
instance.interceptors.response.use(res => {
return res
}, err => {
// 響應錯誤處理 一般http狀態(tài)碼以5開頭，500 系統(tǒng)錯誤岛抄，502, 系統(tǒng)重啟
$('#modal').show()
setTimeout(() => {
$('#modal').hide()
}, 2000)
return Promise.reject(err)
})
instance.get('/data.json').then(res=>{
console.log(res)
}).catch(err=>{
//單獨處理錯誤樣式
console.log(err)
})
六嫁艇、取消請求
用于取消正在進行的http請求
let source = axios.CancelToken.source()
axios.get('/data.json', {
cancelToken: source.token
}).then(res => {
console.log(res)
}).catch(err => {
//取消請求后返回的messge信息
console.log(err)
})
// 取消請求(message可選)
source.cancel('cancel http')
七、封裝axios
// service 循環(huán)遍歷輸出不同的請求方法
let instance = axios.create({
baseURL: 'http://localhost:9000/api',
timeout: 1000
})
const Http = {}; // 包裹請求方法的容器
// 請求格式/參數(shù)的統(tǒng)一
for (let key in service) {
let api = service[key]; // url method
// async 作用：避免進入回調(diào)地獄
Http[key] = async function(
params, // 請求參數(shù) get：url弦撩，put步咪，post，patch（data）益楼，delete：url
isFormData = false, // 標識是否是form-data請求
config = {} // 配置參數(shù)
) {
let newParams = {}
// content-type是否是form-data的判斷
if (params && isFormData) {
newParams = new FormData()
for (let i in params) {
newParams.append(i, params[i])
}
} else {
newParams = params
}
// 不同請求的判斷
let response = {}; // 請求的返回值
if (api.method === 'put' || api.method === 'post' || api.method === 'patch') {
try {
response = await instance[api.method](api.url, newParams, config)
} catch (err) {
response = err
}
} else if (api.method === 'delete' || api.method === 'get') {
config.params = newParams
try {
response = await instance[api.method](api.url, config)
} catch (err) {
response = err
}
}
return response; // 返回響應值
}
}
// 攔截器的添加
// 請求攔截器
instance.interceptors.request.use(config => {
// 發(fā)起請求前做些什么
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止點擊
message: '加載中...'
})
return config
}, () => {
// 請求錯誤
Toast.clear()
Toast('請求錯誤猾漫，請求稍后重試')
})
// 響應攔截器
instance.interceptors.response.use(res => {
// 請求成功
Toast.clear()
return res.data
}, () => {
Toast.clear()
Toast('請求錯誤，請求稍后重試')
})
附：node后臺接口服務
后臺接口服務目錄在gitee代碼倉庫根目錄的axios_node下
如何啟動感凤？
進入axios_node目錄悯周，首先需要安裝依賴npm install，依賴安裝完成后輸入node index.js啟動服務
代碼倉庫地址 https://gitee.com/EverZc/VueAxios.git
如需文章上方axios X-Mind思維腦圖文件陪竿，關注微信公眾號：文靖撩知識 禽翼，回復axios 即可領取。
