Vue Ajax配置（基于axios）

素颜马尾好姑娘i 2023-05-28 11:24 10阅读 0赞

直接修改`main.js`文件即可。

## 引用 ##

import axios from 'axios'

## 配置拦截器 ##

如果你需要在特定的响应码下做特殊处理，可以定义自己的拦截器，方法如下：

**标记异步请求（很重要！）**

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

**配置请求拦截器**

axios.interceptors.request.use(config => { 
      return config
    }, err => { 
      console.log(err)
    })

**配置响应拦截器**

axios.interceptors.response.use(response => { 
      return response
    }, function (error) { 
      if (error.response.status === 401) { 
        window.location = error.response.headers.location
      } else if (error.response.status >= 500) { 
        // element-ui
        Vue.prototype.$message({  type: 'error', message: '服务不可用，请稍候再试' })
        return Promise.reject(error)
      } else { 
        return Promise.reject(error)
      }
    })

## 注册 ##

Vue.prototype.$http = axios

## 使用 ##

**示例一（同步）**

let id = 10001;
    const resp = await this.$http.get('/api/order/info', {  params: {  id } });
    console.log(resp.data);

**示例二（异步）**

let id = 10001;
    this.$http.get('/api/order/info', {  params: {  id } }).then(({  data }) => { 
      console.log(data);
    });

**示例三（form data）**

这种情况比较特殊，必须要将json序列化成query-string，如下所示：

import qs from 'query-string'

let id = 10001;
    this.$http.post('/api/order/info', qs.stringify(jsonData)).then(({  data }) => { 
      console.log(data);
    });

发表评论取消回复

表情：

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

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

相关阅读

相关 vue axios配置

import axios from 'axios' axios.defaults.headers = \{ 'api-version': 'V1' \} ax

矫情吗；*/ 2023年06月16日 13:57/ 0 赞/ 158 阅读

相关 Vue Ajax配置（基于axios）

直接修改`main.js`文件即可。引用 import axios from 'axios' 配置拦截器如果你需要在特定的响应码下做特殊处理，可以定

素颜马尾好姑娘i/ 2023年05月28日 11:24/ 0 赞/ 11 阅读

相关 Vue的axios与ajax的区别：axios是对ajax的封装

分析 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 ajax技术实现了网页的局部数据刷新，axios实现了对aj

向右看齐/ 2022年12月10日 07:19/ 0 赞/ 215 阅读

相关 vue---使用axios发送ajax请求

1：首先导入两个包，一个是Vue的包，一个是axios的包： <script src="https://cdn.jsdelivr.net/npm/vue/dist/v

拼搏现实的明天。/ 2022年12月02日 11:00/ 0 赞/ 252 阅读

相关 vue+axios拦截器配置

vue+axios拦截器配置 import axios from "axios"; import QS from "qs"; // import

墨蓝/ 2022年11月19日 01:29/ 0 赞/ 260 阅读

相关 Vue_Ajax请求------axios入门小案例

通过小项目演示使用vue-axios如何和后端进行通信！ vue项目中通常使用的两个ajax库！ 1：插件vue-resource(不推荐使用，常用在v

迈不过友情╰/ 2022年11月03日 04:24/ 0 赞/ 194 阅读

相关 Axios - 基于 Vue + Element 请求封装

前言 > 当然，其他 `React` 或 `UI` 框架可作为参考。本文基于 `Axios` 请求库，封装全局能通过 `this（挂载到Vue实例上）` 全局调用的请

╰+攻爆jí腚メ/ 2022年10月16日 01:55/ 0 赞/ 366 阅读

相关 Vue+ajax实现文件下载【这里的ajax->axios】

文章转自：[https://www.cnblogs.com/yulj/p/8494465.html][https_www.cnblogs.com_yulj_p_8494465.

我不是女神ヾ/ 2022年02月04日 01:47/ 0 赞/ 433 阅读

相关 vue中的axios发送ajax请求

1.安装axios：执行命令 npm install axios --save 2.重启：npm run dev 3.使用axios import axios f

小灰灰/ 2021年12月24日 00:21/ 0 赞/ 455 阅读

相关 Vue封装ajax请求的函数（axios）

使用过Vue的都知道，在vue的项目中，实现前后端交互是通过resource或者axios，而相比之中axios是使用比较多的一种。在学习的过程中，学习了解了axios的使用方

心已赠人/ 2021年10月23日 23:26/ 0 赞/ 729 阅读