一文聊聊vue專案中怎麼使用axios？基本用法分享

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

提示：本篇詳解axios在vue專案中的範例。在使用Vue.js框架開發前端專案時，會經常傳送ajax請求伺服器端介面，在開發過程中，需要對axios進一步封裝，方便在專案中的使用。【學習視訊分享：、】

Axios簡介

axios框架全稱（ajax – I/O – system）：

基於promise用於瀏覽器和node.js的http使用者端，因此可以使用Promise API

一、axios是幹啥的

說到axios我們就不得不說下Ajax。在舊瀏覽器頁面在向伺服器請求資料時，因為返回的是整個頁面的資料，頁面都會強制重新整理一下，這對於使用者來講並不是很友好。並且我們只是需要修改頁面的部分資料，但是從伺服器端傳送的卻是整個頁面的資料，十分消耗網路資源。而我們只是需要修改頁面的部分資料，也希望不重新整理頁面，因此非同步網路請求就應運而生。

Ajax(Asynchronous JavaScript and XML)：
非同步網路請求。Ajax能夠讓頁面無重新整理的請求資料。

實現ajax的方式有多種，如jQuery封裝的ajax，原生的XMLHttpRequest，以及axios。但各種方式都有利弊：

原生的XMLHttpRequest的設定和呼叫方式都很繁瑣，實現非同步請求十分麻煩
jQuery的ajax相對於原生的ajax是非常好用的，但是沒有必要因為要用ajax非同步網路請求而參照jQuery框架

Axios（ajax i/o system）：
這不是一種新技術，本質上還是對原生XMLHttpRequest的封裝，可用於瀏覽器和nodejs的HTTP使用者端，只不過它是基於Promise的，符合最新的ES規範。具備以下特點：

在瀏覽器中建立XMLHttpRequest請求
在node.js中傳送http請求
支援Promise API
攔截請求和響應
轉換請求和響應資料
取消要求
自動轉換JSON資料
使用者端支援防止CSRF/XSRF(跨域請求偽造)

在這裡插入圖片描述

二、安裝使用

安裝有三種方式：

npm安裝

 npm install axios
登入後複製

bower安裝

bower install axios
登入後複製

通過cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
登入後複製

在vue專案的main.js檔案中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios
登入後複製

在元件中使用axios

<script>
	export default {
		mounted(){
			this.$axios.get('/goods.json').then(res=>{
				console.log(res.data);
			})
		}
	}
</script>
登入後複製

三、Axios請求方式

1、axios可以請求的方法：

get：獲取資料，請求指定的資訊，返回實體物件
post：向指定資源提交資料（例如表單提交或檔案上傳）
put：更新資料，從使用者端向伺服器傳送的資料取代指定的檔案的內容
patch：更新資料，是對put方法的補充，用來對已知資源進行區域性更新
delete：請求伺服器刪除指定的資料

2、get請求

範例程式碼

方法一

 //請求格式類似於 http://localhost:8080/goods.json?id=1
this.$axios.get('/goods.json',{
    			params: {
                    id:1
                }
			}).then(res=>{
					console.log(res.data);
				},err=>{
					console.log(err);
			})
登入後複製

方法二

this.$axios({
		method: 'get',
		url: '/goods.json',
    	params: {
            id:1
        }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})
登入後複製

3、post請求

post請求一般分為兩種型別

1、form-data 表單提交，圖片上傳、檔案上傳時用該型別比較多
2、application/json 一般是用於 ajax 非同步請求

範例程式碼

方法一

this.$axios.post('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			},err=>{
				console.log(err);
			})
登入後複製

方法二

$axios({
	method: 'post',
	url: '/url',
	data: {
		id:1
	}
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})
登入後複製

form-data請求

let data = {
	//請求引數
}

let formdata = new FormData();
for(let key in data){
	formdata.append(key,data[key]);
}

this.$axios.post('/goods.json',formdata).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})
登入後複製

4、put和patch請求

範例程式碼

put請求

this.$axios.put('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			})
登入後複製

patch請求

this.$axios.patch('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			})
登入後複製

5、delete請求

範例程式碼

引數以明文形式提交

this.$axios.delete('/url',{
				params: {
					id:1
				}
			}).then(res=>{
				console.log(res.data);
			})
登入後複製

引數以封裝物件的形式提交

this.$axios.delete('/url',{
				data: {
					id:1
				}
			}).then(res=>{
				console.log(res.data);
			})

//方法二
axios({
    method: 'delete',
    url: '/url',
    params: { id:1 }, //以明文方式提交引數
    data: { id:1 } //以封裝物件方式提交引數
}).then(res=>{
	console.log(res.data);
})
登入後複製

6、並行請求

並行請求：同時進行多個請求，並統一處理返回值

範例程式碼

 this.$axios.all([
	this.$axios.get('/goods.json'),
	this.$axios.get('/classify.json')
]).then(
	this.$axios.spread((goodsRes,classifyRes)=>{
		console.log(goodsRes.data);
		console.log(classifyRes.data);
	})
)
登入後複製

四、Axios範例

1、建立axios範例

範例程式碼

let instance = this.$axios.create({
				baseURL: 'http://localhost:9090',
				timeout: 2000
			})
			
instance.get('/goods.json').then(res=>{
	console.log(res.data);
})
登入後複製

可以同時建立多個axios範例。
axios範例常用設定：

baseURL 請求的域名，基本地址，型別：String
timeout 請求超時時長，單位ms，型別：Number
url 請求路徑，型別：String
method 請求方法，型別：String
headers 設定請求頭，型別：Object
params 請求引數，將引數拼接在URL上，型別：Object
data 請求引數，將引數放到請求體中，型別：Object

2、axios全域性設定

範例程式碼

//設定全域性的超時時長
this.$axios.defaults.timeout = 2000;
//設定全域性的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';
登入後複製

3、axios範例設定

範例程式碼

let instance = this.$axios.create();
instance.defaults.timeout = 3000;
登入後複製

4、axios請求設定

範例程式碼

this.$axios.get('/goods.json',{
				timeout: 3000
			}).then()
登入後複製

以上設定的優先順序為：請求設定 > 範例設定 > 全域性設定

五、攔截器

攔截器：在請求或響應被處理前攔截它們

1、請求攔截器

範例程式碼

this.$axios.interceptors.request.use(config=>{
				// 發生請求前的處理

				return config
			},err=>{
				// 請求錯誤處理

				return Promise.reject(err);
			})

//或者用axios範例建立攔截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
    return config
})
登入後複製

2、響應攔截器

範例程式碼

this.$axios.interceptors.response.use(res=>{
				//請求成功對響應資料做處理

				return res //該返回物件會傳到請求方法的響應物件中
			},err=>{
				// 響應錯誤處理

				return Promise.reject(err);
			})
登入後複製

3、取消攔截

範例程式碼

let instance = this.$axios.interceptors.request.use(config=>{
				config.headers = {
					token: ''
				}
				return config
			})
			
//取消攔截
this.$axios.interceptors.request.eject(instance);
登入後複製

六、錯誤處理

範例程式碼

this.$axios.get('/url').then(res={

			}).catch(err=>{
				//請求攔截器和響應攔截器丟擲錯誤時，返回的err物件會傳給當前函數的err物件
				console.log(err);
			})
登入後複製

七、取消請求

範例程式碼

let source = this.$axios.CancelToken.source();

this.$axios.get('/goods.json',{
				cancelToken: source
			}).then(res=>{
				console.log(res)
			}).catch(err=>{
				//取消請求後會執行該方法
				console.log(err)
			})

//取消請求，引數可選，該引數資訊會傳送到請求的catch中
source.cancel('取消後的資訊');
登入後複製

（學習視訊分享：、）

以上就是一文聊聊vue專案中怎麼使用axios？基本用法分享的詳細內容，更多請關注TW511.COM其它相關文章！