axios在vue項目中的使用實例詳解

1、基本用法

安裝

cnpm i axios --save

在 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>

2、axios請求方法

axios可以請求的方法：

• get：獲取數據，請求指定的信息，返回實體對象
• post：向指定資源提交數據（例如表單提交或文件上傳）
• put：更新數據，從客戶端向服務器傳送的數據取代指定的文檔的內容
• patch：更新數據，是對put方法的補充，用來對已知資源進行局部更新
• delete：請求服務器刪除指定的數據

2.1、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);
})

2.2、post請求

post請求一般分為兩種類型

• form-data 表單提交，圖片上傳、文件上傳時用該類型比較多
• 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);
})

2.3、put和patch請求

示例代碼

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

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

2.4、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);
})

3、並發請求

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

示例代碼

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);
	})
)

4、axios實例

4.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

4.2、axios全局配置

示例代碼

//配置全局的超時時長
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

4.3、axios實例配置

示例代碼

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

4.4、axios請求配置

示例代碼

this.$axios.get('/goods.json',{
	timeout: 3000
}).then()

以上配置的優先級為：請求配置 > 實例配置 > 全局配置

5、攔截器

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

5.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
})

5.2、響應攔截器

示例代碼

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

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

	return Promise.reject(err);
})

5.3、取消攔截

示例代碼

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

6、錯誤處理

示例代碼

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

}).catch(err=>{
	//請求攔截器和響應攔截器拋出錯誤時，返回的err對象會傳給當前函數的err對象
	console.log(err);
})

7、取消請求

主要用於取消正在進行的http請求。

示例代碼

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('取消后的信息');