axios拦截，api统一管理

axios

我们在请求数据的时候使用到axios，但我们每一个页面的数据请求都需要用到axios，如果重复的使用，造成代码的繁多，且占据了大量内存，所以，我们可以把axios进行封装，在页面进行调用就可以了，使用axios以及他的封装具体操作如下
1）首先，先引入插件axios

npm install axios --save-dev

2)在我们的项目src文件下创建一个http的文件夹，创建一个http.js和api.js
http.js用来写我们的封装，api.js用来写我们封装的接口

下面进行axios封装

1）引入axios

import axios from “axios”;

2）引入vuex

import store from “@/store/index”;

3）引入vant

import { Toast } from “vant”;

4）引入我们的环境变量

import baseUrl from “@/config/index”;

5）创建axios实例

const instance = axios.create({
	// axios.create 创建axios实例
    timeout: 5000,
    // 如果请求超过事件，就放弃这个请求
    baseUrl
    // 域名
})

6）添加请求拦截
我们可以在请求拦截上添加loading动画，以及携带token

// 添加请求拦截器
// 在发送请求之前进行拦截
instance.interceptors.request.use(
  //
  function(config) {
    // 在发送请求之前做些什么

    if (store.state.token) {
      config.headers.Authorization = store.state.token;
      //在配置的头信息里添加授权字段=vuex里的token
    }
    //如果vuex中有token，证明已经登陆了，在发送请求的时候携带token
    // 在请求的头信息里 的Authorization字段携带token
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

7）响应拦截
我们在响应拦截中，可以关闭loading动画，判断返回的状态码来做响应的操作

// 添加响应拦截器
instance.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    // console.log(response);
    if (response.data.msg === "无效token") {
      router.push({
        path: "/login",
      });
    }
    return response;
    //如果后台返回的数据告诉我们 token是无效的 就跳转到登陆页面
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

7）导出封装的axios函数

// 封装http方法，如果请求成功就把请求到的数据return 如果响应失败就执行失败的catch函数
// data是post的传参  params是get的传参
export default function http(url, method, data = {}, params = {}) {
  return instance({
    url,
    data,
    method,
    params,
  })
    .then((res) => {
      console.log(res);
      if (res.status >= 200 && res.status < 300) {
        return res;
      } else {
        return Promise.reject(res.data.meta.msg);
        //失败的回调
      }
    })
    .catch((err) => {
      return Promise.reject(err);
      //走失败的回调
    });
}

// axios拦截器 就是对请求和响应进行拦截，拦截之后做一些事情，做完之后才继续放行

api的统一管理

在api.js写入我们封装的接口
qs是一个插件
需要下载

yarn add qs -S

import request from "./http"; //导入axios实例
import qs from "qs" 

let obj={
getlist(){
  return request({
      url:"/index.json",//我们需要请求的接口
      method:"get",
      params:{},
      hideloading:true
  })  
},

}
export default obj;

index.js代码：

/** 
 * api接口的统一出口
 */
// 文章模块接口
import article from '@/api/article';
// 其他模块的接口……
 
// 导出接口
export default {    
    article,
    // ……
}

在组件中的使用（按需导入）

import {article} from '@/api/index'

created(){
   article.articleList().then(info=>{
       if(info.code==200)
     this.num=info.data
  }
     })
}