快捷導(dǎo)航

VUE零基礎(chǔ)入門(mén)axios的使用

更新時(shí)間：2022年07月29日 14:50:23 作者：Favour72

這篇文章主要介紹了axios在Vue項(xiàng)目中用來(lái)向后臺(tái)發(fā)送請(qǐng)求（調(diào)接口API），獲取響應(yīng)信息的方法,axios 是一個(gè)輕量的 HTTP客戶(hù)端，基于 XMLHttpRequest 服務(wù)來(lái)執(zhí)行 HTTP 請(qǐng)求，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一.axios是什么

axios是一款ajax請(qǐng)求工具,是一個(gè)用于發(fā)送ajax請(qǐng)求的HTTP庫(kù)，本質(zhì)上是對(duì)AJAX的封裝。而且Axios支持 Promise操作，讓我們無(wú)需再使用傳統(tǒng)callback方式來(lái)進(jìn)行異步編程。(Promise 是JS中進(jìn)行異步編程的一種解決方案。)

二.axios的特點(diǎn)

前后端都可以使用
不依賴(lài)dom
攔截?cái)U(kuò)展強(qiáng)大
可封裝復(fù)用性強(qiáng)

三.axios怎么安裝

win+R 找到cmd命令窗口切換到項(xiàng)目目錄(cd 項(xiàng)目目錄)

輸入npm i axios -S

然后運(yùn)行項(xiàng)目

四.在VUE全局掛載

分為三步

在 main.js中

導(dǎo)入

import axios from 'axios';

掛載

Vue.prototype.$axios = axios;

使用

在App.vue中

this .$axios.xxx

舉個(gè)栗子:

五.axios便捷方法

post(url , data , config)

get(url , config) get 傳遞參數(shù)給后端

?參數(shù)名=參數(shù)值&參數(shù)名2=參數(shù)值2?current=2

.delete(url,config) 刪除

.put(url,data,config) 修改

六.axios基礎(chǔ)方法

語(yǔ)法如下:

axios({

url,//請(qǐng)求的地址

methods//請(qǐng)求方法 get,post,put,delete

data,post請(qǐng)求的數(shù)據(jù)

params:get請(qǐng)求的數(shù)據(jù)

headers:請(qǐng)求頭配置

})

七.axios執(zhí)行結(jié)果

語(yǔ)法如下:

網(wǎng)絡(luò)請(qǐng)求成功

.then(res=>{

res.data 請(qǐng)求返回的數(shù)據(jù)

}

請(qǐng)求失敗

.catch(err=>{

err.response.data 返回失敗數(shù)據(jù)

}

舉個(gè)栗子:

this.$axios.get('/api/feed?current=' + this.current
						, {
								headers: {
									"Authorization": 'Bearer ' + localStorage.getItem('token')
								}
							},
					)
					.then(res => {
						console.log('成功', res.data);
						this.feedList = res.data.data;
						this.pagnation = res.data.pagnation;
					})
					.catch(err => {
						console.error(err);
						alert(err.response.data.msg)
					})

八.config axios 配置

給 headers: 請(qǐng)求頭添加token

headers: {
		  "Authorization": 'Bearer ' + localStorage.getItem('token')
		}

切記:'Bearer '要加空格

或者在main.js中直接配置

// 給每個(gè)請(qǐng)求都攔截下來(lái) 添加請(qǐng)求的token信息
axios.interceptors.request.use(function(config) {
	config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
	return config
})