vue_axios详解
axios是一個(gè)基于promise的HTTP庫，Chrome、Firefox、Safari、Opera、Edge、IE8+都支持
目錄
1.API
2.config配置對象
3.方法別名
4.配置默認(rèn)值
5.全局配置
6.實(shí)例配置
7.請求配置
8.并發(fā)
9.攔截器
1）請求攔截器
2）響應(yīng)攔截器
3）移除攔截器
4）為axios實(shí)例添加攔截器
10.取消請求
11.錯(cuò)誤處理
12.axios預(yù)檢
1.API
- axios(config)
- axios(url,[config])
2.config配置對象
axios({method:'get', //post、get、put……baseURL:'', //請求的域名，基本地址url: '', //請求的路徑params:{}, //會將請求的參數(shù)拼接在url上data:{}, //會將請求的參數(shù)放在請求體中header:{}, //設(shè)置請求頭，例如設(shè)置token等timeout:1000, //設(shè)置請求超時(shí)時(shí)長，單位：ms })3.方法別名
為方便起見，為所有支持的請求方法提供了別名
- axios.request(config)
- axios.get(url,[config])
- axios.post(url,[data],[config])
- axios.delete(url,[config])
- axios.head(url,[config])
- axios.put(url,[data],[config])
- axios.patch(url,[data],[config])
- axios.options(url,[config])
【例】下面用post和put方法發(fā)送ajax請求
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css"><script src="./vue.js"></script><script src="./axios.js"></script> </head> <body><div id="app"><div class="username"><input type="text" placeholder="用戶名" v-model='name'></div><div class="mail"><input type="text" placeholder="郵箱" v-model='mail'></div><div class="upload-btn" @click='upload'>上傳</div><div class="show-btn" @click='show'>顯示人物信息</div><ul class="person-list" v-for='person in personList'><li class="person"><span>{{ person.name }}</span><span>{{ person.mail }}</span></li></ul></div> </body> <script>const vm = new Vue({el: '#app',data: {name: '',mail: '',personList: []},methods: {upload() {const { name, mail } = thisaxios.post('/setUserInfo', { name, mail }, {baseURL: 'https://developer.duyiedu.com/vue'}).then(res => {console.log(res)alert(res.data.msg)}).catch(error => {alert(error.data.msg)})},show() {axios.get('/getUserInfo', {baseURL: 'https://developer.duyiedu.com/vue'}).then(res => {this.personList = res.data.data.slice(0, 10)})}}}) </script> </html>4.配置默認(rèn)值
可以指定將被用在各個(gè)請求的配置默認(rèn)值
5.全局配置
在實(shí)際項(xiàng)目中，很少用到全局配置
axios.defaults.baseURL = 'https://developer.duyiedu.com/vue'; axios.defaults.timeout = 1000;6.實(shí)例配置
可以使用自定義配置新建一個(gè)axios實(shí)例
const instance = axios.create({baseURL: 'https://developer.duyiedu.com/vue',timeout: 1000, })instance.get('/getUserInfo').then(res => {// ... })7.請求配置
const instance = axios.create(); instance.get('/getUserInfo', {timeout: 5000 })【注】配置的優(yōu)先順序：全局<實(shí)例<請求
8.并發(fā)
同時(shí)進(jìn)行多個(gè)請求，并統(tǒng)一處理返回值
- axios.all(iterable)
- axios.spread(callback)
9.攔截器
interceptors，在發(fā)起請求之前做一些處理，或者在響應(yīng)回來之后做一些處理
1）請求攔截器
axios.interceptors.request.use(config=>{//在發(fā)送請求之前做些什么return config })2）響應(yīng)攔截器
axios.interceptors.response.use(response => {//對響應(yīng)數(shù)據(jù)做點(diǎn)什么 return response })3）移除攔截器
const interceptor = axios.interceptors.response.use(response => {return response }) axios.interceptors.response.eject(interceptor)4）為axios實(shí)例添加攔截器
const instance = axios.create(); instance.interceptors.request.use(config => {})10.取消請求
const source = axios.CancelToken; const source = CancelToken.source();axios.get('/getUserInfo', {cancelToken: source.token }).then(res => {console.log(res); }).catch(error => {if(axios.isCancel(error)) {// 取消請求console.log(error.message);} else {// 處理錯(cuò)誤} })// 取消請求 參數(shù) 可選 source.cancel('取消請求');11.錯(cuò)誤處理
request / response 是 error 的上下文，標(biāo)志著請求發(fā)送 / 得到響應(yīng)。在錯(cuò)誤中，如果響應(yīng)有值，則說明是響應(yīng)時(shí)出現(xiàn)了錯(cuò)誤；如果響應(yīng)沒值，則說明是請求時(shí)出現(xiàn)了錯(cuò)誤；在錯(cuò)誤中，如果請求無值，則說明請求未發(fā)送出去，如取消請求。
在實(shí)際開發(fā)過程中，一般在攔截器中統(tǒng)一添加錯(cuò)誤處理。請求攔截器中的錯(cuò)誤，會當(dāng)請求未成功發(fā)出時(shí)執(zhí)行，但是要注意的是：取消請求后，請求攔截器的錯(cuò)誤函數(shù)也不會執(zhí)行，因?yàn)槿∠埱蟛粫伋霎惓?#xff0c;axios對其進(jìn)行了單獨(dú)的處理。在更多的情況下，我們會在響應(yīng)攔截器中處理錯(cuò)誤。
12.axios預(yù)檢
當(dāng)axios的請求為非簡單請求時(shí)，瀏覽器會進(jìn)行預(yù)檢，及發(fā)送OPTIONS請求。請求到服務(wù)器，詢問是否允許跨域。如果響應(yīng)中允許預(yù)檢中請求的跨域行為，則瀏覽器會進(jìn)行真正的請求，否則會報(bào)405錯(cuò)誤
總結(jié)
以上是生活随笔為你收集整理的vue_axios详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue_异步加载_vue-resourc
- 下一篇： Vue_template是什么