vue 全局使用 axios

水深无声 2022-01-26 14:25 596阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，596人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中使用axios

1. 安装 npm install --save axios 2.导入 import axios from "axios"; 3.使用 cre

不念不忘少年蓝@/ 2023年06月11日 05:26/ 0 赞/ 11 阅读

相关 axios 全局配置

// 配置请求的基准URL地址 axios.defaults.baseURL = 'http://localhost:3000/'; // 配置请求头信

古城微笑少年丶/ 2023年01月08日 04:26/ 0 赞/ 179 阅读

相关 VUE使用axios

1，npm一下 npm install vue-axios --save npm install qs.js --save　　//这一步可以先忽略，它的作用是

雨点打透心脏的1/2处/ 2022年12月12日 13:53/ 0 赞/ 160 阅读

相关 vue之axios使用

一、安装 1、利用npm安装`npm install axios --save` 2、利用bower安装`bower install axios --save`

雨点打透心脏的1/2处/ 2022年06月13日 00:14/ 0 赞/ 279 阅读

相关 axios + webpack + vue。 axios基本使用

目的：在wepack+vue 项目中使用 axios 第一步：安装 cnpm i axios -S 第二步：导入 2-1导入：import axi

Dear 丶/ 2022年05月14日 09:20/ 0 赞/ 306 阅读

相关 Vue封装axios 并注册为全局函数

npm install axios(或在index.html引入axios文件) 在src目录下新建api文件夹，将http请求相关文件统一管理 ![20190901192

「爱情、让人受尽委屈。」/ 2022年05月14日 00:48/ 0 赞/ 323 阅读

相关 vue全局使用axios的方法

在vue项目开发中，我们使用axios进行ajax请求，很多人一开始使用axios的方式，会当成vue-resoure的使用方式来用，即在主入口文件引入import VueRe

蔚落/ 2022年02月04日 10:49/ 0 赞/ 331 阅读

相关 vue 全局使用 axios

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

水深无声/ 2022年01月26日 14:25/ 0 赞/ 597 阅读

相关【vue系列】vue使用axios配置全局请求参数

> 产生需求：为了安全，请求需要带上用户参数，有时候接口都全都要带，要一个一个写有点麻烦，所以放在请求头是一个好的选择获取到用户信息并存到本地缓存

以你之姓@/ 2021年12月22日 11:53/ 0 赞/ 329 阅读

相关 vue 中 axios 全局配置

在请求接口的时候做全局处理, 便于管理和维护 axios 全局配置 base.js import axios from "axios"; import q

青旅半醒/ 2021年09月19日 08:22/ 0 赞/ 521 阅读