vue框架中 axios的封装 带“拦截器”

vue框架中 axios的封装

（一）、全局下载 axios
npm install --save axios
（二）、建一个专门用来封装axios的js文件
在src目录下建立api（大部分公司写api）文件夹 /src/api
在api文件夹下建立新的js文件，也就是封装a xi o s的文件夹，例如：feng.js
在feng.js中所写的代码，如下：
第一步：引入 axios （import axios(名字随便起) from “axios”）
第二步：封装axios发送请求的函数， 用 export 将函数暴露向外出来
第三步：使用promise 封装axios请求 ，resolve（成功）reject（失败）代码如下图：

第五步：封装完成
拓展：es6 的解构

//数组解构
var arr = [1,2,3,4]
var [a,b,c,d] = arr 
console.log(a) // 1 
//对象解构
var obj = {
name:"suke",
age:"18",
love:"three"
}
var {name, age , love} = obj
console.log (name)// suke

常见面试题

（三）、使用封装的axios
第一步：首先在需要引用axios的文件夹中 引入 封装的axios 的文件，因为导出时是用export 所以引入需要用es6的结构。引入代码如下图第8行，
第二步：引入后 代码如下图，调用引入的 homelink 函数 函数的参数是url地址 和 请求方式 homelink （地址，“get/post”）

加有拦截器的axios的封装！！

拦截器，也叫做请求拦截和响应拦截。因为拦截器是可有可无的，所以是个工具，它可以优化项目（必须请求时带有token，或者后端响应是做出的都做，404报错等）

一、要给axios加上拦截器，首先要封装拦截器。

首先在src目录下 创建util文件夹，文件夹中创建用来封装拦截器的js文件
代码如下，以后要用拦截器，直接复制粘贴到 封装的js文件中

import axios from "axios"
//创建axios 负值给变量 service
const service = axios.create();
// 添加请求拦截器（interceptors）
service.interceptors.request.use(function (config){
//发送请求之前做什么
return config;
},function(error){
//请求错误之后做什么
return Promise.reject(error);
})
//添加响应拦截器
service.interceptors.response.use(function(response){
//对响应数据做点什么
return response;
},function(error){
//对响应错误之后做点什么
return Promise.reject(error);
});
export default service

代码中的最后一句话 导出封装的 拦截器
封装axios 的js文件夹就不是以前的代码了（有两处改变），代码如下图

二、axios的封装 与 axios 带拦截器的封装 api中代码的不同

两处不同
（一）、 导入的文件不同
axios不代拦截器的封装 需要引入axios （ import axios from “axios” ）而带拦截器的则不需要 引入axios ，只需要引入 封装好的拦截器的js文件（import service from “@/util/service.js”）
(二)、 下图为函数中不同的代码 图一为不带拦截器，图二为带拦截器

带有拦截器封装的axios，调用是和以前不带拦截器的时候一样，都是调用封装axios的函数并传入 url 和 请求方式

注意！上面的封装是 带有拦截器不传参的 axios请求。

带有拦截器传参的get请求 （get传参params）、

在上图只中，因为是get的请求参数，所以method已经写的是get方式，不用外传进来，因为封装的是带有发送参数的，所以在调用时参数要传到封装的函数中，axios传参，使用params。 具体代码。如上图！
示例调用的方法：

带有拦截器传参的post请求 （post传参params）、

post发送请求时不能直接发送 直接发送后台无法接收这时需要使用URLSearchParams来对发送的数据进行转换需要使用
如下图：

！！带有拦截器传参的post请求，代码如下：

post请求在调用封装的axios有所不同！！

上图就是在调用封装的post传参的请求，调用方式和get一样，就是在给函数中形参data传实参的时候， 比较麻烦，具体代码如上图！