快捷導(dǎo)航

關(guān)于Vue3使用axios的配置教程詳解

更新時(shí)間：2022年04月29日 12:52:36 作者：夏日米米茶

道axios是一個(gè)庫,并不是vue中的第三方插件,下面這篇文章主要給大家介紹了關(guān)于Vue3使用axios的配置教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、安裝axios

npm install axios --save

二、配置axios，添加攔截器

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

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

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

// 添加響應(yīng)攔截器
service.interceptors.response.use(
	function (response) {
		console.log(response)
		// 2xx 范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
		// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
		// dataAxios 是 axios 返回?cái)?shù)據(jù)中的 data
		const dataAxios = response.data
		// 這個(gè)狀態(tài)碼是和后端約定的
		const code = dataAxios.reset
		return dataAxios
	},
	function (error) {
		// 超出 2xx 范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
		// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
		console.log(error)
		return Promise.reject(error)
	}
)
export default service

三、使用axios發(fā)送請(qǐng)求

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

// 導(dǎo)入axios實(shí)例
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,
	})
}

接著在具體業(yè)務(wù)頁面里使用這個(gè)請(qǐng)求，例如：

<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) // 將默認(rèn)改寫為這樣
app.provide('$axios', axios)

組件內(nèi)使用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>