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=>{})