vue 全局使用 axios_vue中axios作为全局

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;
})