Vue3如何使用axios

首先就是安装axios

在终端输入

npm install axios --save

配置axios

我们将要使用的axios实例单独编写成一个js文件，文件夹可以建立在src/plugins/（自己选择建立在什么地方）。命名为： axiosInstance.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

然后在main.js中导入我们编写axiosInstance.js文件，全局配置一下axios的引用。

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from '@/plugins/axiosInstance.js'

const app = createApp(APP);   //建立一个vue3app
app.mount('#app');            //将这个vue3app全局挂载到#app元素上
app.config.globalProperties.$axios=axios;  //配置axios的全局引用