vue 全局使用 axios

最新推荐文章于 2025-09-30 14:52:20 发布

原创最新推荐文章于 2025-09-30 14:52:20 发布 · 1.7k 阅读

10 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

28 篇文章

订阅专栏

博客介绍了Vue全局使用Axios的方法。可直接在main.js中引入Axios，使用时用this.axios；也可先新建api.js对Axios进行封装，再引入到main.js，使用时用this.$api。前提是要引入到main.js才能全局使用。

vue 全局使用 axios，可以直接在 main.js 中引入 axios；也可以对 axios 进行封装，封装之后再引入到 main.js 中。总之要想全局使用，就得引入到 main.js 中，才行

1、安装 axios

npm install axios --save

2、直接引入到 main.js 中，代码如下

// 引入axios
import axios from 'axios';
Vue.prototype.axios = axios;   //axios是一个基于promise的HTTP库，没有install方法，不能使用Vue.use()的方式

Vue.prototype.axios.interceptors.response.use(data => {
  //console.log(data.status);
  return data;
});

Vue.prototype.axios.interceptors.request.use(config => {
  return config;
});

使用时直接使用 this.axios 即可

this.axios.post('http://localhost/product/test').then( res => {      
     this.msg = res.data.message;
     this.products = res.data.data;
})

3、对 axios 进行封装

新建 api.js ，用于对 axios 进行封装

import axios from 'axios'

var api = axios.create({
    timeout: 5000,
    Headers: {'Content-Type': 'application/json'}
    //Headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

api.interceptors.request.use(config => {
    //config.headers['token'] = '01234567890';
    return config
})

api.interceptors.response.use(data => {
    return data
})

export default api;

在 main.js 中引入 api.js

import api from './lib/api'
Vue.prototype.$api = api

使用时直接使用 this.$api

this.$api.post('http://localhost/product/asyncList','offset=0&pageSize=10',
).then(
    res => {this.msg = res.data.message;
    this.products = res.data.data;
})