vue項目中如何使用axios

這篇文章主要介紹了vue項目中如何使用axios的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue項目中如何使用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

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

import axios from 'axios'
Vue.prototype.$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);
})

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”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue項目中如何使用axios”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。