Vue3使用axios的配置方法

本篇內容主要講解“Vue3使用axios的配置方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue3使用axios的配置方法”吧!

一、安裝axios

npm install axios --save

二、配置axios，添加攔截器

在src目錄下新建一個request文件夾，在里面新建index.ts（或者.js）文件，編輯代碼如下：

import axios from 'axios'
// 創建一個 axios 實例
const service = axios.create({
	baseURL: '/api', // 所有的請求地址前綴部分
	timeout: 60000, // 請求超時時間毫秒
	withCredentials: true, // 異步請求攜帶cookie
	headers: {
		// 設置后端需要的傳參類型
		'Content-Type': 'application/json',
		'token': 'your token',
		'X-Requested-With': 'XMLHttpRequest',
	},
})

// 添加請求攔截器
service.interceptors.request.use(
	function (config) {
		// 在發送請求之前做些什么
		return config
	},
	function (error) {
		// 對請求錯誤做些什么
		console.log(error)
		return Promise.reject(error)
	}
)

// 添加響應攔截器
service.interceptors.response.use(
	function (response) {
		console.log(response)
		// 2xx 范圍內的狀態碼都會觸發該函數。
		// 對響應數據做點什么
		// dataAxios 是 axios 返回數據中的 data
		const dataAxios = response.data
		// 這個狀態碼是和后端約定的
		const code = dataAxios.reset
		return dataAxios
	},
	function (error) {
		// 超出 2xx 范圍的狀態碼都會觸發該函數。
		// 對響應錯誤做點什么
		console.log(error)
		return Promise.reject(error)
	}
)
export default service

三、使用axios發送請求

在src目錄下新建一個apis文件夾，這里面放入今后所有的請求文件，例如新建一個請求用戶信息的接口user.ts，代碼如下：

// 導入axios實例
import httpRequest from '@/request/index'

// 定義接口的傳參
interface UserInfoParam {
	userID: string,
	userName: string
}

// 獲取用戶信息
export function apiGetUserInfo(param: UserInfoParam) {
    return httpRequest({
		url: 'your api url',
		method: 'post',
		data: param,
	})
}

接著在具體業務頁面里使用這個請求，例如：

<script setup lang="ts">
import { onMounted } from 'vue'
import { apiGetUserInfo } from '@/apis/user'
function getUserInfo() {
	const param = {
		userID: '10001',
		userName: 'Mike',
	}
	apiGetUserInfo(param).then((res) => {
		console.log(res)
	})
}
onMounted(() => {
	getUserInfo()
})
</script>

附：Vue3 中全局引入 axios

main.js中

import axios from 'axios'
const app = createApp(App) // 將默認改寫為這樣
app.provide('$axios', axios)

組件內使用axios（compositionAPI）

<script setup>
    import { inject } from 'vue'
    const $axios = inject('$axios')
    $axios.get('https://api.github.com/users').then((resp) => {    
      console.log(resp.data)
    }).catch((err) => {
      console.log(err)
    })
</script>

到此，相信大家對“Vue3使用axios的配置方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！