vue使用Axios详细流程

这篇具有很好参考价值的文章主要介绍了vue使用Axios详细流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、安装

使用 npm:

npm install axios

或使用 yarn:

yarn add axios

vue引入axios,js,vue.js,前端,javascript

二、配置Axios

在src/plugins目录下新建axios.js文件,在该文件里对axios进行自定义配置,如下图:

vue引入axios,js,vue.js,前端,javascript

 axios.js全部代码:

"use strict";

import Vue from 'vue';
import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
axios.defaults.headers.common['Authorization'] = `Bearer ${"inittoken"}`;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  timeout: 60 * 1000, // Timeout
  withCredentials: false, // `withCredentials` 表示跨域请求时是否需要使用凭证
  responseType: 'json', // 默认值 `responseType` 表示浏览器将要响应的数据类型 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream' 浏览器专属:'blob'
  responseEncoding: 'utf8', // 默认值 `responseEncoding` 表示用于解码响应的编码 (Node.js 专属) 注意:忽略 `responseType` 的值为 'stream',或者是客户端请求 Note: Ignored for `responseType` of 'stream' or client-side requests
  xsrfCookieName: 'XSRF-TOKEN', // 默认值  `xsrfCookieName` 是 xsrf token 的值,被用作 cookie 的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值  `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称 
  onDownloadProgress: (progressEvent) => {
    // 处理原生进度事件 `onDownloadProgress` 允许为下载处理进度事件  浏览器专属
    return progressEvent
  },
  maxContentLength: 2000, //`maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
  maxBodyLength: 2000,// `maxBodyLength`(仅Node)定义允许的http请求内容的最大字节数
  validateStatus: (status) => {
    // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
    // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),
    // 则promise 将会 resolved,否则是 rejected。
    return status >= 200 && status < 300; // 默认值
  },
  maxRedirects: 5, // 默认值 `maxRedirects` 定义了在node.js中要遵循的最大重定向数。如果设置为0,则不会进行重定向
};

const _axios = axios.create(config);
//request 拦截器,统一处理请求对象
_axios.interceptors.request.use(
  (config) => {
    // Do something before request is sent  在发送请求之前做一些事情
    console.log("在发送请求之前做一些事情",_axios.defaults.headers.common['Authorization'])
    // 统一请求头处理
    //请求的 config 参数设置的优先级更高,请求的 config 参数设置了Authorization取config 参数的Authorization,否则取初始化默认的Authorization
    const token = !!config.headers.Authorization?config.headers.Authorization:_axios.defaults.headers.common['Authorization'];
    token && (config.headers.Authorization = token);
    return config;
  },
  (error) => {
    // Do something with request error  处理请求错误
    return Promise.reject(error);
  }
);

// Add a response interceptor  添加响应拦截器
_axios.interceptors.response.use(
  (response) => {
    // Do something with response data  使用响应数据执行某些操作
    return response;
  },
  (error) => {
    // Do something with response error  处理响应错误
    if (error.response && error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面,并携带当前页面的路径
        // 在登录成功后返回当前页面,这一步需要在登录页操作。
        case 401:
          console.info("跳转登录页");
          break;
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          console.info("跳转登录页登陆过期");
          // 清除token
          // localStorage.removeItem("token");
          // store.commit('loginSuccess', null);
          // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
          setTimeout(() => {
            console.info("跳转过期");
          }, 1000);
          break;
        // 404请求不存在
        case 404:
          console.info("404");
          break;
        // 其他错误,直接抛出错误提示
        default:
          console.info("其他错误");
      }
      return Promise.reject(error.response);
    } else {
      return Promise.reject(error);
    }

  }
);
/************************************************************************************************/
Plugin.install = (Vue, options) => {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)

export default Plugin;

注意:

axios.defaults.headers.common['Authorization'] = `Bearer ${"inittoken"}`

或者

  headers: {

              "Content-Type": "application/json;",

              Authorization: `Bearer ${"customtoken"}`,

            },

问题:为什么要在token前面添加Bearer这个单词和一个空格?

答:在token前面添加Bearer这个单词和一个空格是一种规范,token前面的这一个空格是必不可少的。

Authorization: `Bearer ${"customtoken"}`。

vue引入axios,js,vue.js,前端,javascript

 vue引入axios,js,vue.js,前端,javascript

 三、引入Axios

在main.js入口文件引入axios,如下图:

import './plugins/axios'

vue引入axios,js,vue.js,前端,javascript

 main.js全部代码:

import Vue from 'vue'
import './assets/iconfont/iconfont.css'
import './assets/fonts/DS-DIGI.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import './plugins/axios'
// import axios from "axios";
// Vue.prototype.$axios = axios;
import configMethods from './config/config.js'
configMethods.GetConfig() //url接口初始化调用
    import './mockserver/mockserver'  //js控制gif播放暂停插件不能与mockjs插件一起用
    /**
     ***
    gif必须与正在加载的页面位于同一域( 以及端口和协议)。 该库通过解析js中的gif图像数据、 提取单个帧并在画布元素上渲染它们来工作。 无法从普通图像加载中获取原始图像数据, 因此此库对图像执行XHR请求, 并强制MIME类型为“ text / plain”。 因此, 使用此库受到与任何其他XHR请求相同的跨域限制。
     **/
import { setTheme, themeList } from '@/themeConfig/setTheme.js' ///样式主题
if (!!window.localStorage.getItem('themeProperty')) {
    setTheme(window.localStorage.getItem('themeProperty'))
} else {
    setTheme("")
}

Vue.config.productionTip = false

四、使用Axios

使用示例:

this.$axios.post(url,req(入参),config(axios的config配置)

.then(res=>{})

.catch(error=>{})

注意:Axios请求的 config 参数设置的优先级更高,大于拦截器。

 GetData() {
      this.$axios
        .post(
          AxiosUrl.HomePageUrlPath + "GetPredictData",
          JSON.stringify({
            Name: 13,
            Age: 13,
          }),
          {
            // 这里是 axios 的 config
            headers: {
              "Content-Type": "application/json;",
              Authorization: `Bearer ${"customtoken"}`,
            },
            // onUploadProgress: (progressEvent) => {
            //   // `onUploadProgress` 允许为上传处理进度事件
            //   // 浏览器专属
            //   // 处理原生进度事件
            //   console.log("上传处理进度事件",progressEvent)
            // },
            // onDownloadProgress: (progressEvent) => {
            //   // `onDownloadProgress` 允许为下载处理进度事件
            //   // 浏览器专属
            //   // 处理原生进度事件
            //   console.log("下载处理进度事件",progressEvent)
            // },
            signal: this.abortController.signal,
          }
        )
        .then((res) => {
          console.log("res", res);
        });
    },

五、token设置

1.在拦截器统一设置

const _axios = axios.create(config);
//request 拦截器,统一处理请求对象
_axios.interceptors.request.use(
  (config) => {
    // Do something before request is sent  在发送请求之前做一些事情
    console.log("在发送请求之前做一些事情",_axios.defaults.headers.common['Authorization'])
    // 统一请求头处理
    //请求的 config 参数设置的优先级更高,大于拦截器,请求的 config 参数设置了Authorization取config 参数的Authorization,否则取初始化默认的Authorization
    const token = !!config.headers.Authorization?config.headers.Authorization:_axios.defaults.headers.common['Authorization'];
    token && (config.headers.Authorization = token);
    return config;
  },
  (error) => {
    // Do something with request error  处理请求错误
    return Promise.reject(error);
  }
);

vue引入axios,js,vue.js,前端,javascript

2.在发送请求时设置 

  GetData() {
      this.$axios
        .post(
          AxiosUrl.HomePageUrlPath + "GetPredictData",
          JSON.stringify({
            Name: 13,
            Age: 13,
          }),
          {
            // 这里是 axios 的 config
            headers: {
              "Content-Type": "application/json;",
              Authorization: `Bearer ${"customtoken"}`,
            },
            // onUploadProgress: (progressEvent) => {
            //   // `onUploadProgress` 允许为上传处理进度事件
            //   // 浏览器专属
            //   // 处理原生进度事件
            //   console.log("上传处理进度事件",progressEvent)
            // },
            // onDownloadProgress: (progressEvent) => {
            //   // `onDownloadProgress` 允许为下载处理进度事件
            //   // 浏览器专属
            //   // 处理原生进度事件
            //   console.log("下载处理进度事件",progressEvent)
            // },
            signal: this.abortController.signal,
          }
        )
        .then((res) => {
          console.log("res", res);
        });
    },

 vue引入axios,js,vue.js,前端,javascript

 注意:在发送请求时设置的Authorization优先级更高!

六、取消请求 

AbortController,从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求:

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

在vue使用: 

  1. 在组件data中创建一个 AbortControlller 的实例

  2. 在所有有可能需要结束请求的 config 里,添加 signal : abortController.sinal 这个选项

  3. 当离开页面的时候,使用 abortController.abort() 结束所有的请求即可

export default {
	// 在页面离开的时候,取消掉所有的这些请求即可,不管有没有完成
    beforeDestroy() {
        this.abortController.abort()
    },
    data(){
        return {
            abortController: new AbortController() // 用于取消请求
        }
    },
    methods: {
     GetData() {
      this.$axios
        .post(
          AxiosUrl.HomePageUrlPath + "GetPredictData",
          JSON.stringify({
            Name: 13,
            Age: 13,
          }),
          {
            // 这里是 axios 的 config
            headers: {
              "Content-Type": "application/json;",
              Authorization: `Bearer ${"customtoken"}`,
            },
            signal: this.abortController.signal,
          }
        )
        .then((res) => {
          console.log("res", res);
        });
    },
    }
}

七、测试取消请求

写一个调用接口的for循环测试。如下:

vue引入axios,js,vue.js,前端,javascript

vue引入axios,js,vue.js,前端,javascript

参考链接: 

1.vue中axios防止多次触发终止多次请求的示例代码(防抖)_vue.js_脚本之家

2.vue 在页面离开时,丢弃所有未完成的请求 AbortController signal / CancelToken.cancel 取消请求_vue离开页面事件_十月ooOO的博客-CSDN博客

3.Axios封装多种方式实现以及高级用法详解(文件上传,请求重试,取消请求等)_axios封装详解_乐闻x的博客-CSDN博客 4.中止一个或多个 Web 请求_前端精髓的博客-CSDN博客

5.https://www.cnblogs.com/Qooo/p/14054116.html

6.取消请求 | Axios 中文文档 | Axios 中文网 文章来源地址https://www.toymoban.com/news/detail-716295.html

到了这里,关于vue使用Axios详细流程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【VUE】6、VUE项目中引入axios

    1、初识 axios Axios,是一个基于 promise 的网络请求库,作用于 node.js 和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequest。 主要特点: 从浏览器创建 XMLHttpRequests 从 node.js 创建

    2023年04月11日
    浏览(31)
  • 前端实现vue3使用axios调用后端接口

    作用是: 抛出基础请求方式、基础前缀、请求头信息、参数、超时时间、凭证、后端接口返回数据类型! 作用是:使用请求拦截器和响应拦截器解决下边的问题 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消

    2024年01月20日
    浏览(43)
  • 前端vue3分享——项目封装axios、vite使用env环境变量

    大家好,我是yma16,本文分享关于前端vue3分享——项目封装axios、使用env环境变量。 该系列往期文章: csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 什么是axios axios是一个流行的JavaScript库,用于在浏览器和Node.js环境中进行H

    2024年02月07日
    浏览(88)
  • 【问题+解决】axios/vue/element/echarts引入报错

    缘由 笔者在html页面引用vue来快速实现页面; head/head 中通过 scriptsrc=\\\"\\\"/script 方法引入,开始引入,应用都是正常,后来用了也没问题;奇怪的是,前几天发现html页面无法出现效果图 更新线上项目发现,html页面加载慢;接口请求超时;页面样式也出现了问题; 当时的引入u

    2024年01月21日
    浏览(43)
  • 前端网络请求之JavaScript XHR、Fetch、Axios

    AJAX:一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。在不重新加载整个网页的情况下,对网页的某部分进行更新 Fetch:基于 promise 设计的。Fetch 的代码结构比起 ajax 简单多。fetch 不是 aj

    2024年01月23日
    浏览(48)
  • 10 使用Vue+axios+Vuex实现登录后前端数据本地化存储实战

    这已经是《 Vue + SpringBoot前后端分离项目实战 》专栏的前端部分第8篇博客了, 服务端部分 由天哥(天哥主页)负责,目前专栏目录如下: Vue + SpringBoot前后端分离项目实战 - 前端部分 1. 手把手带你做一套毕业设计-征程开启 2. 我应该把毕业设计做到什么程度才能过关? 3

    2024年02月16日
    浏览(38)
  • Axios基本使用,为学习后续的Vue服务【发送请求+并发请求+前端拦截器】

    目录 1、项目中引入Axios 2、使用Axios发送请求 2.1、例:发送GET请求 2.2、例:发送POST请求 3、axios并发请求 4、拦截器 注:个人学习笔记,因自己学过后端,所以有关后端的代码,我在这里就不展示了~ 不了解后端的宝子,也不会耽误学习,因为公司里会有写好的接口文档,直

    2024年02月02日
    浏览(50)
  • vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法

    axios封装-我常用的请求头参数  application/json; charset=utf-8 页面登录请求-post 网络请求正常传入参数 后端代码,查看控制台发现都为null,没取到值。 1.尝试将前端post请求改成get,其他都不用变 发现正常取到值,打印输出正常。前端页面正常跳转。 2.后端设置为post请求,前端a

    2024年02月02日
    浏览(46)
  • Vue & Axios——前端技术栈

    Vue (读音 /vjuː/,类似于 view) 是一个前端框架, 易于构建用户界面 Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或项目整合 支持和其它类库结合使用 开发复杂的单页应用非常方便 Vue 是 Vue.js 的简称 官网: https://cn.vuejs.org/ git 地址: https://github.com/vuejs 思想:

    2024年01月18日
    浏览(40)
  • vue中axios的二次封装——vue 封装axios详细步骤

        api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护。     通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢

    2024年02月02日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包