Axios请求方式和响应请求拦截

一,axios介绍

axios是一个基于promise的http库,可以用在浏览器和node.js中,可以提供一下服务:

1、从浏览器中创建XMLHttpRequests

2、从node.js创建http请求

3、支持PromiseAPI

4、拦截请求和响应

5、转换请求数据和响应数据

6、取消请求

7、自动转换JSON数据

8、客户端支持防御XSRF

二,安装

安装命令:npm install axios

三,请求方式

1 get 请求,一般多用于获取数据

2 post请求,主要提交表单数据和上传文件

3 put请求,主要对数据进行全部更新

4 patch请求,一般用于只对更改过的数据进行更新

5 delete请求,一般用于删除请求(参数可以和post一样放在请求体上也可以放在url上)

四,请求响应拦截

    对于一次http请求简单来讲,就两个过程(非http建立连接过程),一是将前端请求发送到后端,二是将后端处理后的数据拿到。那么在请求发送之前,以及数据返回之后,我们都可以对请求的结构以及返回的数据做一个处理,然后在将请求发给后端(如在请求头中增加token),如果是后端返回数据,则可以根据状态码来进行提前的一个提示。以下就对axios封装的代码做一个简单的介绍

1,对axios进行基础配置

import axios from 'axios'; // 该处引入axios模块

// 构建axios实例

const instance = axios.create({

baseURL: process.env.BASE_API,  // 该处url会根据开发环境进行变化(开发/发布)

timeout: 10000  // 设置请求超时连接时间

})

2 请求拦截器

instance.interceptors.request.use(

config => {

console.log(config);  // 该处可以将config打印出来看一下,该部分将发送给后端(server端)

config.headers.token = '该处可设置token内容';

return config  // 对config处理完后返回,下一步将向后端发送请求

},

error => {  // 当发生错误时,执行该部分代码

    console.log(error); //调试用

    return Promise.reject(error)

}

)

3,response拦截器(数据返回后,具体页面加载之前)

instance.interceptors.response.use(

response => {  // 该处为后端返回整个内容

const res = response.data;  // 该处可将后端数据取出,提前做一个处理

if ('正常情况') {

return response  // 该处将结果返回,下一步可用于前端页面渲染用

} else {

alert('该处异常');

return Promise.reject('error')

}

},

error => {

console.log(error),

return Promise.reject(error)

}

)

4,将axios实例导出,方便其他页面调用

export default instance

5,其他页面调用上述实例发送请求,例如在api .js编写

import instance from '../xxx.js'; // 将实例导入

const qs=require('qs');  // 用于处理前端发送数据格式

const base = process.env.BASE_URL;  // 该处根据开发环境变化

export const GetStepperData = (params) => request.post('/cart/update',params); // 该处即可实现向后端发送请求,并将数据返回给调用该接口的位置

6,在其他页面按需导入和引用GetStepperData (名字随便起)

import { GetStepperData } from "@/request/api";//其中这个 "@/request/api"是写上面的文件路径,这是按需导入

引用:

 GetStepperData ({请求体:xxx,}).then(res=>{})

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容