vue怎么全局引入axios 和设置基础路径

vue设置全局axios 和设置基础路径.全局的是写在main.js文件中,

// 1下载axios
// npm i axios 或者 yarn add axios 

// 2 在min.js 中导入axios (根据需求导入不同的位置)
import axios from 'axios'
// 3设置基础路径
axios.defaults.baseURL = 基础路径(写入自己的基础路径)
// 4axios方法添加到Vue的原型上
Vue.prototype.$axios = axios //注意此处的$axios

用axios请求数据

<script>
export default {
  data(){
    return {
      list: [] // 商品所有数据
    }
  },
    
     // 不必在自己引入axios变量, 而是直接使用全局属性$axios
  created(){
  this.$axios({//注意此处是this.$axios(因为你在main.js中挂载的是$axios)
      method: '请求方式', // get post
      url: '请求地址',
      data: {    // 拼接到请求体的参数,  post请求的参数
        xxx: xxx,
      },
      params: {  // 拼接到请求行的参数, get请求的参数
        xxx: xxx 
      }
    })
    .then(res => {
        console.log(res.data) // 后台返回的结果   回调函数(回:回头)
    })
    .catch(err => {
        console.log(err) // 后台报错返回
    })

// ajax:状态 400 500
}
</script>
你可以按照以下步骤全局封装axios使用Vue3: 1. 首先,安装axios库。在命令行中运行以下命令: ``` npm install axios ``` 2. 创建一个名为`axios.js`的文件,并在其中编写封装axios的代码。代码示例如下: ```javascript import axios from 'axios'; // 创建一个axios实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置接口的基础路径 timeout: 5000 // 设置超时时间 }); // 请求拦截器 instance.interceptors.request.use( config => { // 在发送请求之前做些什么,例如添加token等 return config; }, error => { // 对请求错误做些什么 console.error(error); return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( response => { // 对响应数据做些什么,例如处理错误码等 return response.data; }, error => { // 对响应错误做些什么 console.error(error); return Promise.reject(error); } ); // 导出封装后的axios实例 export default { install(app) { app.config.globalProperties.$axios = instance; } }; ``` 3. 在你的Vue应用的入口文件(通常是`main.js`),引入并使用该封装后的axios实例。代码示例如下: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import axios from './axios'; const app = createApp(App); // 使用封装后的axios实例 app.use(axios); app.mount('#app'); ``` 现在,你就可以在整个Vue应用中通过`this.$axios`来发送请求了。例如,在组件中可以这样使用: ```javascript export default { mounted() { this.$axios.get('/api/data') .then(response => { console.log(response); }) .catch(error => { console.error(error); }); } }; ``` 这样你就成功地全局封装了axios,并在Vue3中使用它发送请求。希望对你有帮助!如果有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值