首先就是安装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的全局引用
