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

提示：本篇詳解axios在vue專案中的實例。在使用Vue.js框架開發前端專案時，會經常發送ajax請求服務端接口，在開發過程中，需要對axios進一步封裝，方便在專案中的使用。 【學習影片分享：vue影片教學、web前端影片】

#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></script>

在vue專案的

main.js文件中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

在元件中使用

axios

<script>
	export default {
		mounted(){
			this.$axios.get(&#39;/goods.json&#39;).then(res=>{
				console.log(res.data);
			})
		}
	}
</script>

##三、Axios請求方式

1、axios可以請求的方法：

get：取得數據，請求指定的訊息，返回實體物件

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

2、get請求

#範例程式碼

方法一

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> //请求格式类似于 http://localhost:8080/goods.json?id=1 this.$axios.get('/goods.json',{      params: {                     id:1                 } }).then(res=&gt;{ console.log(res.data); },err=&gt;{ console.log(err); })</pre><div class="contentsignin">登入後複製</div></div>

方法二

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.$axios({ method: 'get', url: '/goods.json',      params: {             id:1         } }).then(res=&gt;{ console.log(res.data); },err=&gt;{ console.log(err); })</pre><div class="contentsignin">登入後複製</div></div>

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

（学习视频分享：web前端开发、编程基础视频）

以上是一文聊聊vue專案中怎麼使用axios？基本用法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！