精华内容
下载资源
问答
  • axios封装

    2021-01-17 12:24:14
    [](https://leanote.com/api/file/getImage?fileId=5ea24dfeab644126a1042fee)# 为什么要封装---...

    https://blog.csdn.net/qq_40128367/article/details/82735310

    https://www.mmxiaowu.com/article/589af8cde9be1c5b21ef8e9c

    ![](https://leanote.com/api/file/getImage?fileId=5ea24dfeab644126a1042fee)

    # 为什么要封装

    ---

    ## 1)配置通用项

    ## 2)统一处理请求错误,进行提示

    # 请求流程

    ---

    ![](https://leanote.com/api/file/getImage?fileId=5ea24dfeab644126a1042fef)

    ## 请求失败

    通常请求失败有两种原因:

    ### 1)网络问题或代码问题造成的400、500等错误

    ### 2)请求参数后端不通过验证,由后端抛出的错误

    根据不同的后端框架或者程序员又可以分为两种:

    一种是直接返回json,用一个特别的code来区别正常请求反悔的数据

    ```

    {

    code: -404,

    message: '这是错误信息',

    data: '',

    }

    ```

    另一种是抛出http 404之类的,然后把错误原因放在header里。

    ### 在组件写调用ajax时,通常都是这么写

    ```

    import axios from 'axios'

    axios.post('/user' , {

    params: {

    firstName: 'Fred',

    lastName: 'Flintstone'

    }

    })

    .then(function (response) {

    // 处理响应

    if(response.data.code === 200){

    console.log(response.data)

    } else {

    // 其中存在后端返回的错误

    }

    })

    .catch(function (error) {

    // 网络异常引发的错误或服务器抛出的错误

    console.log(error.toString())

    });

    ```

    我们知道,一般中大型规模的项目,请求是比较多的,这样导致代码冗余,会越来越臃肿,我们可以**对错误进行预处理。**

    ## 拦截器做预处理

    ### 请求时的拦截器

    ```

    axios.interceptors.request.use(config => {

    // 这里可以加一些动作, 比如来个进度条开始动作,

    NProgress.start()

    return config

    }, error => {

    return Promise.reject(error)

    })

    ```

    ### 请求后的拦截器

    在普通用法中,then()处理响应,catch()处理错误,通过拦截器,可以提前判断,并返回二者之一。

    **这里并没有在拦截器中对错误进行处理,而是将响应或者错误返回到get/post请求的结果中,通过链式处理。**

    ```

    axios.interceptors.response.use(function (response) {

    // 返回响应时做一些处理

    return response;

    }, function (error) {

    // 当响应异常时做一些处理

    // 这里我们把错误信息扶正, 后面就不需要写 catch 了

    return Promise.resolve(error.response)

    });

    ```

    ## 封装get,post方法

    封装的get/post方法由3部分组成:

    ![](https://leanote.com/api/file/getImage?fileId=5ea24dfeab644126a1042ff0)

    ### 基本配置

    包括请求方法,基础url,相对url,参数,超时时间,请求头等。

    ### checkStatus()

    链式处理第一步,判断http状态码是否正常,和拦截器一样,请求正常则返回响应,请求异常则返回错误,最后返回结果给checkCode()。

    ### checkCode()

    链式处理第二步,处理上一步的结果,分别处理网络异常,以及后端返回的异常。

    ## 在组件中引用

    注: 使用babel-preset-stage-3才可保证async和await正常使用。

    引入封装后的axios

    ```

    import http from '../utils/http'

    import api from '../utils/api'

    ```

    使用方法

    ```

    fetchData: async function () {

    let params = {

    }

    const res = await http.get(api.right, params)

    if (res.data.success) {

    alert('请求成功')

    }

    }

    ```

    #代码

    ---

    ```

    /**axios封装

    * 请求拦截、相应拦截、错误统一处理

    */

    import axios from 'axios';import QS from 'qs';

    import { Toast } from 'vant';

    import store from '../store/index'

    // 环境的切换

    if (process.env.NODE_ENV == 'development') {

    axios.defaults.baseURL = '/api';

    } else if (process.env.NODE_ENV == 'debug') {

    axios.defaults.baseURL = '';

    } else if (process.env.NODE_ENV == 'production') {

    axios.defaults.baseURL = 'http://api.123dailu.com/';

    }

    // 请求超时时间

    axios.defaults.timeout = 10000;

    // post请求头

    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

    // 请求拦截器

    axios.interceptors.request.use(

    config => {

    // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了

    // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断

    const token = store.state.token;

    token && (config.headers.Authorization = token);

    return config;

    },

    error => {

    return Promise.error(error);

    })

    // 响应拦截器

    axios.interceptors.response.use(

    response => {

    if (response.status === 200) {

    return Promise.resolve(response);

    } else {

    return Promise.reject(response);

    }

    },

    // 服务器状态码不是200的情况

    error => {

    if (error.response.status) {

    switch (error.response.status) {

    // 401: 未登录

    // 未登录则跳转登录页面,并携带当前页面的路径

    // 在登录成功后返回当前页面,这一步需要在登录页操作。

    case 401:

    router.replace({

    path: '/login',

    query: { redirect: router.currentRoute.fullPath }

    });

    break;

    // 403 token过期

    // 登录过期对用户进行提示

    // 清除本地token和清空vuex中token对象

    // 跳转登录页面

    case 403:

    Toast({

    message: '登录过期,请重新登录',

    duration: 1000,

    forbidClick: true

    });

    // 清除token

    localStorage.removeItem('token');

    store.commit('loginSuccess', null);

    // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面

    setTimeout(() => {

    router.replace({

    path: '/login',

    query: {

    redirect: router.currentRoute.fullPath

    }

    });

    }, 1000);

    break;

    // 404请求不存在

    case 404:

    Toast({

    message: '网络请求不存在',

    duration: 1500,

    forbidClick: true

    });

    break;

    // 其他错误,直接抛出错误提示

    default:

    Toast({

    message: error.response.data.message,

    duration: 1500,

    forbidClick: true

    });

    }

    return Promise.reject(error.response);

    }

    }

    );

    /**

    * get方法,对应get请求

    * @param {String} url [请求的url地址]

    * @param {Object} params [请求时携带的参数]

    */

    export function get(url, params){

    return new Promise((resolve, reject) =>{

    axios.get(url, {

    params: params

    })

    .then(res => {

    resolve(res.data);

    })

    .catch(err => {

    reject(err.data)

    })

    });

    }

    /**

    * post方法,对应post请求

    * @param {String} url [请求的url地址]

    * @param {Object} params [请求时携带的参数]

    */

    export function post(url, params) {

    return new Promise((resolve, reject) => {

    axios.post(url, QS.stringify(params))

    .then(res => {

    resolve(res.data);

    })

    .catch(err => {

    reject(err.data)

    })

    });

    }

    ```

    ```

    import axios from 'axios'

    import qs from 'qs'

    import NProgress from 'nprogress'

    axios.interceptors.request.use(config => {

    NProgress.start()

    return config

    }, error => {

    return Promise.reject(error)

    })

    axios.interceptors.response.use(response => response, error => Promise.resolve(error.response))

    function checkStatus(response) {

    NProgress.done()

    if (response.status === 200 || response.status === 304) {

    return response

    }

    return {

    data: {

    code: -404,

    message: response.statusText,

    data: response.statusText,

    }

    }

    }

    function checkCode(res) {

    if (res.data.code !== 200) {

    alert(res.data.message)

    }

    return res

    }

    export default {

    post(url, data) {

    return axios({

    method: 'post',

    url,

    data: qs.stringify(data),

    timeout: 30000,

    headers: {

    'X-Requested-With': 'XMLHttpRequest',

    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'

    }

    }).then(checkStatus).then(checkCode)

    },

    get(url, params) {

    return axios({

    method: 'get',

    url,

    params,

    timeout: 30000,

    headers: {

    'X-Requested-With': 'XMLHttpRequest'

    }

    }).then(checkStatus).then(checkCode)

    }

    }

    ```

    展开全文
  • axios封装api

    2020-12-24 04:32:15
    Vuex + axios 发送请求Vue 原本有一个官方推荐的 ajax 插件vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource目前主流的 Vue 项目,都选择axios来完成 ajax 请求,而大型项目都会使用 Vuex ...

    Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource

    目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求...

    文章

    技术小牛人

    2017-11-16

    1347浏览量

    在使用vue-cli中遇到的几个问题

    前言:框架没有好坏之分,能解决需求就可以。之前没事用vue模仿过BOSS直聘App(纯属娱乐),实际工作中开发过一个后台管理系统,遇到过不少坑,终于闲下来稍微总结几个问题分享一下!

    一、所遇到的问题(对cli模式开发不熟悉绕路),以及解决办法

    1:本地如何配置跨域和后台联调

    2:如果非要使用jQu...

    文章

    水灵儿

    2017-11-04

    1584浏览量

    JS HTTP 请求库哪家强?Axios,Request,Superagent,Fetch 还是 Supertest

    原文作者:Chidume Nnamdi

    译者:UC 国际研发 Jothy

    Web 开发中客户端与服务器间的交互非常重要,它有利于客户端应用高度动态化。用户通过单击按钮的交互方式向服务器发送请求,服务器检索数据并返回,页面无需重新加载,直接使用返回的数据重新渲染其部分/整体内容,或者对数据进行操作。...

    文章

    初商

    2019-08-05

    717浏览量

    vue-cli3 之【框架搭建】教程

    或许有的同学还不知道vue3.0与之前的版本有哪些好处,可以查查相关资料。主要改动是优化了节点,减少了无谓的遍历,优化速度提升了约6倍!

    那么vue-cli3.0框架与之前cli2.0又有了一些变化,我们简单说几个:

    1、名字改了,以前叫vue-cli,现在叫@vue/cli。2、build和co...

    文章

    Villin

    2020-11-16

    72浏览量

    基于阿里的Node全栈之路(五)前后端分离进阶-接口篇

    上一篇文章我就简单的贴了下代码,放出来不到一天就破千了,这让我非常的意外,也很开心;) 我会好好的把上一篇的代码注释补一下的。然后决定再放一些我的代码和理解,俗话说:

    Talk is cheap, show me the code!

    还记得我的架构中,只有前端静态代码,同时所有的请求是经过跨域...

    文章

    木木工程师

    2017-09-27

    4766浏览量

    vue+webpack绕过QQ音乐接口对host的验证

    最近在使用vue2.5+webpack3.6撸一个移动端音乐项目, 获取全部歌单json数据时遇到了接口对host和referer的限制 ,故不能直接在前端使用jsonp对接口数据的读取。

    一、 先实现使用jsonp读取的方式

    安装jsonp模块并, 封装请求方法

    1. $ npm instal...

    文章

    我是小助手

    2018-07-10

    1153浏览量

    Our-Task——一个完整的前后端分离项目(附详细教程)

    Our-Task——一个完整的前后端分离项目(附详细教程)

    前言

    Our-Task项目致力于打造一个完整的清单管理系统,只是为了把自己每天都安排地明明白白。

    项目文档

    Github地址

    Github地址

    预览地址

    项目已经部署在阿里云ECS上,可以在上面尝试使用,没有限制任何功能,大家随意就行(手...

    文章

    冷酷的小风

    2020-11-23

    70浏览量

    异步那些事

    异步请求

    JS中ajax原生请求

    var xhr;

    xhr=new XMLHttpRequest();

    open('GET','url地址')

    xhr.onreadyStateChange=function(){

    if(xhr.readyState==4&&xhe.status...

    文章

    一朵王小花

    2017-11-30

    1506浏览量

    从编程小白到全栈开发:服务的调用

    忙带懒,好久没有更新文章了(其实主要是想留给你们一些消化前面文章知识点的时间,哈哈哈)。

    我们在前文 《从编程小白到全栈开发:基于框架开发服务端》中,初步学习了如何使用Node.js服务端框架Express来编写后端服务,并基于Express,对我们先前的简易计算器程序的代码进行了一次重构。如果你...

    文章

    zarknight

    2018-01-09

    945浏览量

    基于VUE实现的新闻后台管理系统-三

    开始coding啦

    ¶分析项目

    根据展示效果我们可以分析出,Web页面有两个,一个用于登录,一个用于系统内容控制,我们分别将其命名为Login和Cms,然后进行路由配置。

    在src/page下新建Login.vue和Cms.vue文件,及进行vue模板构建

    |--src

    |--page...

    文章

    谷中仁

    2017-10-02

    1604浏览量

    Bitcoin价格行情GraphQL API封装实战【Node.js】

    在这篇文章中,我们将学习如何使用Node.js开发一个比特币实时价格行情的GraphQL API。

    比特币开发相关链接:

    c#比特币开发详解

    Java比特币开发详解

    PHP比特币开发详解

    比特币数据分析工具

    比特币PHP离线开发包

    Omni/USDT Java开发包

    1、创建项目目录

    在终...

    文章

    ezpod

    2020-02-25

    1282浏览量

    自定义企业首页文档

    自定义企业首页文档

    如果你还没有注册企业,请移步到https://oa.dingtalk.com/#/login注册企业。

    如果你已经有企业,请移步到https://oa.dingtalk.com用你的手机版钉钉扫描登录,在第一次登录时,会要求你设置管理员密码。

    接下来,你一共需要经历三个操作,配...

    文章

    象尘

    2017-03-01

    14778浏览量

    用vue快速开发app的脚手架工具

    前言

    多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来.

    使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP.

    本文最大特点:

    webpack4

    多页面

    跨域Proxy代理

    VConsole移动端调试,手机上的...

    文章

    我是小助手

    2018-06-29

    1905浏览量

    阿里云前端周刊 - 第 20 期

    推荐

    1. 阿里电商架构演变之路

    https://yq.aliyun.com/articles/161190

    首届阿里巴巴中间件技术峰会上,阿里巴巴中间件技术部专家唐三带来“阿里电商架构演变之路”的演讲,本文从阿里业务和技术架构开始引入,分别分享了阿里电商从1.0到4.0架构的演变之路,着重分析了...

    文章

    houfeng

    2017-08-15

    1389浏览量

    React Native网络请求

    很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容——以下就是你会用到的东西。新手可以对照这个简短的视频教程加深理解。

    使用Fetch

    React Native提供了和web标准一致的Fe...

    文章

    code_xzh

    2016-10-22

    4180浏览量

    Vue - day2

    day2

    自定义指令

    Vue.directive('指令id',{

    bind:function(el,binding){} // 指令绑定到元素上,调用,只执行一次 (样式有关的操作)

    inserted:function(el,binding){} // 被绑定元素插入父节点时调用...

    文章

    rlq_浅

    2018-08-12

    1061浏览量

    webpack4 中的 React 全家桶配置指南,实战!

    最新React全家桶实战使用配置指南

    这篇文档 是我在听 吕小明老师的课程,吕老师结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档,总共耗时一周总结下来的,希望能对读者能够有收获, 我是在这基础多些加工,希望对你们有所收藏

    目录

    1.版本说明

    2.目录结构...

    文章

    前端小智@大迁世界

    2019-12-05

    120浏览量

    Javascript 模块化指北

    前言

    随着 Web 技术的蓬勃发展和依赖的基础设施日益完善,前端领域逐渐从浏览器扩展至服务端(Node.js),桌面端(PC、Android、iOS),乃至于物联网设备(IoT),其中 JavaScript 承载着这些应用程序的核心部分,随着其规模化和复杂度的成倍增长,其软件工程体系也随之建立起来...

    文章

    x-cold

    2019-04-28

    1260浏览量

    SpringBoot+Shiro前后端分离项目通过JWT实现自动登录

    版权声明:本文首发 http://asing1elife.com ,转载请注明出处。https://blog.csdn.net/asing1elife/article/details/82591383

    Spr...

    文章

    asing1elife

    2018-09-10

    12884浏览量

    我在阿里招前端,我该怎么帮你?

    作者|沈砾捷(磐冲)出品|阿里巴巴新零售淘系技术部

    我是谁?为什么写这篇文章?

    好吧,我承认,我自己在招聘上可能是有点没找到方法。但是,看了那么多简历,经历了那么多次面试,我最大的感受却是惋惜。因为有好多同学,在电话那头我听出了努力,听出了能力,听出了激情,但是却没有听到亮点、和让我觉得,能够继续...

    文章

    淘系技术

    2020-05-26

    12607浏览量

    阿里oss上传图片react组件alioss-react,vue组件alioss-vue (不用我先收藏着,后端看下前端处理方法)

    1、介绍

    最近开发了一个项目,其中需要一个上传图片到阿里云的 oss 上面,就是上传图片到阿里云的 oss 上面。

    因为之前开发过 vue 的阿里云 oss 上传,所以直接复制粘 vue 的组件。

    因为我做的是 react 的项目,所以需要稍微修改。

    介于以后会经常用到,所...

    文章

    小结巴巴

    2018-09-07

    4174浏览量

    Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的结业项目。

    在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之...

    文章

    哈你真皮

    2018-01-03

    1175浏览量

    ES6常用知识点概述

    我们会更具之前的罗列的内容进行一个深入的分析。

    变量的新定义——let和const

    在ES6没有被普及时,我们会用的变量定义的方法是var。其实,var对于一个刚刚接触js的人说,或许并不觉得怪异。但是,对于一个开发者而言,或许会在内心抨击它。因为它就是javascript的败笔之一,在其他语言看...

    文章

    水灵儿

    2017-12-13

    920浏览量

    展开全文
  • axios封装和传参

    2020-12-22 05:51:55
    axios封装和传参1.开发环境 vue+typescript2.电脑系统 windows10专业版3.在开发的过程中,我们会经常使用到 axios进行数据的交互,下面我来说一下,axios封装和传参!4-1:下面结构如下:4-2:request.js代码如下:import ...

    axios封装和传参

    1.开发环境 vue+typescript

    2.电脑系统 windows10专业版

    3.在开发的过程中,我们会经常使用到 axios进行数据的交互,下面我来说一下,axios封装和传参!

    4-1:下面结构如下:

    4-2:request.js代码如下:import axios from 'axios'

    import qs from 'qs'

    axios.defaults.timeout = 2000000; //响应时间

    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //配置请求头

    // axios.defaults.baseURL = 'http://192.168.137.208:3000/'; //配置接口地址

    //POST传参序列化(添加请求拦截器)

    axios.interceptors.request.use((config) => {

    //在发送请求之前做某件事

    // config.headers.Accept="appliaction/json,text/plan";

    if(config.method === 'post'){

    config.data = qs.stringify(config.data);

    }

    return config;

    },(error) =>{

    console.log('错误的传参')

    return Promise.reject(error);

    });

    // axios.interceptors.response.use((res) => {

    // //对响应数据做些事

    // if (!res.data) {

    // return Promise.resolve(res);

    // }

    // return res;

    // }, (error) => {

    // console.log(error);

    // console.log('网络异常')

    // return Promise.reject(error);

    // });

    //返回状态判断(添加响应拦截器)

    axios.interceptors.response.use((res) =>{

    //对响应数据做些事

    if(!res.data.success){

    return Promise.resolve(res);

    }

    return res;

    }, (error) => {

    console.log('网络异常')

    return Promise.reject(error);

    });

    //返回一个Promise(发送post请求)

    export function fetchPost(url,param) {

    return new Promise((resolve, reject) => {

    axios.post(url,param)

    .then(response => {

    resolve(response);

    }, err => {

    reject(err);

    })

    .catch((error) => {

    reject(error)

    })

    })

    }

    // 返回一个Promise(发送get请求)

    export function fetchGet(url,param) {

    return new Promise((resolve, reject) => {

    axios.get(url,{params:param})

    .then(response => {

    resolve(response)

    }, err => {

    reject(err)

    })

    .catch((error) => {

    reject(error)

    })

    })

    }

    export default {

    fetchPost,

    fetchGet,

    }

    //注意:请求头的配置,决定了传参的方法和格式,请求头的配置至关重要

    5.SheBei.ts代码如下:import {fetchPost,fetchGet} from '@/utils/request'

    export function feng(feng){

    return fetchPost('/feng',feng);

    }

    6.Home.vue请求代码如下:mounted(){

    let a:any={

    "name":"111",

    "pass":"000"

    }

    feng(a).then((res)=>{

    console.log(res);

    })

    }

    7.效果如下:

    8.在node.js中输入如下:

    //可以看到,接受到了前端传过来的参数!

    9.参数的传递取决于,request.ts中请求头的配置!

    10.请求头配置如下:--第一种

    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //请求体中的数据会以普通表单形式(键值对)发送到后端

    --第二种

    axios.defaults.headers.post['Content-Type'] ='application/json'; // 请求体中的数据会以json字符串的形式发送到后端

    --第三种

    axios.defaults.headers.post['Content-Type'] ='multipart/form-data'; // 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件

    11.使用10第一种,传参效果如下:

    12.使用10第二种,传参效果如下:

    //注意:使用这种方法,需要修改request.ts代码:

    13.使用10第三种,传参效果如下:

    14.本期的教程到了这里就结束啦,让我们一起努力走向巅峰!

    展开全文
  • Vue 简单的axios封装

    千次阅读 2021-12-13 14:57:08
    vue项目中对axios的简单封装

    记录一下在Vue项目中简单封装axios的操作

    目录结构

    在这里插入图片描述

     

    安装axios

    起手安装axios
    npm install axios

     

    request.js

    该文件中对axios进行封装

    import axios from 'axios'
    
    const baseURL = 'http://localhost:4000/api'
    // 创建 axios 实例
    const service = axios.create({
        baseURL: baseURL, // 请求地址前缀,将自动加在 url 前面
        timeout: 6000 // 请求超时时间
    })
    
    // axios请求拦截器
    service.interceptors.request.use(config => {
        if (localStorage.getItem('loginToken')) {
            // 请求统一设置header
            config.headers.Authorization = localStorage.getItem('loginToken')
        }
        return config
    }, error => {
        return Promise.reject(error)
    })
    
    // axios响应拦截器
    service.interceptors.response.use(response => {
        return response.data
    }, error => {
        // console.log('看一看', error.response)
        const { status } = error.response
        if (status === 401) { // token失效
            Message.error('token失效,请重新登录')
            // 清除token
            localStorage.removeItem('loginToken')
            router.push('/')
        }
        return Promise.reject(error)
    })
    
    export { service as axios }
    

    axios.create操作中还可以进行其他的一些操作,诸如:

    1. 根据当前环境切换不同的url(生产环境/开发环境/测试环境)
    baseURL: process.env.NODE_ENV === 'production' ? 'productApi': 'developApi'
    
    1. 统一请求头配置
    headers: {
            get: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              // 在开发中,一般还需要单点登录或者其他功能的通用请求头,可以一并配置进来
            },
            post: {
              'Content-Type': 'application/json;charset=utf-8'
              // 在开发中,一般还需要单点登录或者其他功能的通用请求头,可以一并配置进来
            }
      },
    
    1. 跨域、响应码处理
      提供是否允许跨域的属性——withCredentials: true/false
      请求响应序列化
    // 在向服务器发送请求前,序列化请求数据
        transformRequest: [function (data) {
            data = JSON.stringify(data)
            return data
        }],
        // 在传递给 then/catch 前,修改响应数据
        transformResponse: [function (data) {
            if (typeof data === 'string' && data.startsWith('{')) {
                data = JSON.parse(data)
            }
            return data
        }]
    

    同样,拦截器中也可以自定义更多的内容

     

    api.js

    import { axios } from './request'
    
    const api = {
        user: '/user/getUsers'
    }
    
    export default api
    
    export function getUsersApi(param) {
        return axios({
            url: api.user,
            method: 'post',
            data: param,
            // headers: {
    	    //   'Content-Type': 'multipart/form-data'
    	    //   'Content-Type': 'application/json;charset=UTF-8'
    	    // },
    	    // timeout: 500000
    	    // responseType: 'blob'
        })
    }
    

     
     

    使用

    在这里插入图片描述

    参考
    https://www.cnblogs.com/qianxiaox/p/14025708.html

    展开全文
  • 在开发的过程中,我们会经常使用到 axios进行数据的交互,下面我来说一下,axios封装和传参!4-1:下面结构如下:4-2:request.js代码如下:import axios from 'axios'import qs from 'qs'axios.defaults.timeout = 2000000;...
  • axios 封装

    2021-11-02 13:39:21
    import axios, { AxiosRequestConfig } from "axios"; import { baseURL } from "../constant/url"; import { getLocalJWT } from "./authApi"; axios.defaults.baseURL = baseURL; axios.interceptors.request....
  • VUE-AXIOS封装-下载上传

    2021-12-10 11:14:14
    AXIOS 引入axios import axios from 'axios' 引入通知组件 import { Notification, MessageBox, Message } from 'element-ui' 引入从Cookies中获取token import { getToken } from '@/utils/auth' 引入把JSON转换成...
  • axios封装及使用

    2020-12-22 05:52:08
    安装npm install axios -S全局引入在main.js中进行全局注册main.js创建axios文件夹image.png在index.js文件中,创建axios实例,并进行请求拦截import axios from "axios";// 创建axios实例const service = axios....
  • axios封装全局loading

    千次阅读 2021-11-11 17:32:22
    import axios from 'axios' import Cookies from 'js-cookie' import router from '@/router' import qs from 'qs' import { clearLoginInfo } from '@/utils' import isPlainObject from 'lodash/isPlainObject' ...
  • 这篇文章主要为大家详细介绍了axios 封装上传文件的请求方法,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!axios 和 ajax 都支持异步请求,两者使用方法...
  • 1、安装axiosnpm install --save axiosnpm install qs2、新建一个http.js对axios封装3、http.js封装/*** Created by jyy on 2018/8/8.* 封装统一的ajax请求,统一拦截请求,对不同的请求状态封装* 通常说, ajax 请求...
  • vue3.0 axios封装

    2021-05-06 11:17:24
    在src下创建plugins文件夹,创建cookie.ts,封装js-cookie import Cookies from 'js-cookie'; const TokenKey = 'token' const RefreshTokenKey = 'refresh-token' export function getToken() { return Cookies...
  • axios封装中使用loading

    2021-01-15 16:37:22
    npm install axios npm i element-ui -S 在main.js中引入 // vant按需引入 //import {Loading, Toast} from "vant"; // import "vant/lib/index.css"; // Vue.use(Loading).use(Toast) // element-ui样式 import ...
  • vue3.0实现axios封装

    千次阅读 2021-03-03 10:04:39
    vue3.0 axios封装和2.0的大致相似 在src目录下创建文件 config.js export const METHOD = { GET: "get", POST: "post", PUT: "put", DELETE:"delete" }; export const PATH = { getJson: "/mock/index....
  • axios封装统一处理接口

    千次阅读 2021-01-05 17:45:13
    import axios from 'axios' import store from '@/store' import router from "@/router"; import { projectUrl } from "@/config/ssoUrl"; import { Loading, Message, MessageBox } from "element-ui
  • Axios封装处理

    2021-07-24 16:38:56
    目标: 基于axios封装一个请求模块,调用接口时使用 要搞清楚 在封装axios时,都做了哪些事情? 实例化 baseURL 超时时间 大数处理 拦截器 请求拦截器 全局注入token 响应拦截器 token失效 401 跳转...
  • VUE使用axios封装RESTful风格 本文章讲述axios的使用、封装代码、restful风格、接口定义规则知识点。可以根据本文章拓展自己的业务。源代码 文章目录VUE使用axios封装RESTful风格前言一、使用axios1.代码2.知识点二...
  • axios封装多个baseUrl

    2021-02-24 14:57:12
    import axios from 'axios'; import { message } from 'antd'; const createService = baseURL => { // 创建axios实例 const service = axios.create({ baseURL, // api的base_url timeout: 50000 // ...
  • vue 配置axios 封装接口

    千次阅读 2020-12-18 13:29:14
    import axios from 'axios' const service = axios.create({ baseURL: process.env.BASE_API, timeout: 3 * 1000 }) service.interceptors.request.use(config => { config.data = JSON.stringify(config.data...
  • vue 使用axios封装

    千次阅读 2021-04-23 11:20:35
    先下载好axios然后进行封装 npm install axios import axios from 'axios' export default { apiGet(url, params) { var that=this return new Promise((resolve, reject) => { axios.get(url, {params})....
  • axios封装(url统一管理、axios请求拦截、响应拦截、函数封装) 首先要安装axios,一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块 ,然后在里面新建一个http.js和一个api.js文件和一个...
  • 问题如下:有个问题 是这样的 后台给的API接口 请求类型有两种‘Content-Type’: ‘application/json’‘Content-Type’: ‘application/x-...下面是封装的请求方法axios封装代码如下:// 创建axios实例const i...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,577
精华内容 13,430
关键字:

axios封装

友情链接: xoes-overwrite.rar