axios的二次封装-拦截器的使用

我们在项目中，避免不了要使用axios来进行对数据的请求，那如果每页都写一份axios请求，又会显得页面很乱不好维护，那么我们就应该对axios进行二次的封装

1.首先我们在src创建一个api文件

2. 然后再终端安装以下两个插件

//引入axios

npm install --save axios

//引入进度条        

npm install --save nprogress

3.引用并使用

// 对axios的二次封装

import axios from "axios";

//引入进度条

 import nProgress from "nprogress";

//引入进度条样式

 import "nprogress/nprogress.css";



//利用axios的、对象的create方法，去创建一个实例

const http = axios.create({

//基础路径

   baseURL: "/api",

    timeout: 5000,

});



//请求拦截器

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

   //进度条开始

     nProgress.start();

     return config;

});



//响应拦截器

http.interceptors.response.use(

          (res) => {

        //成功回调

        //进度条结束

        nProgress.done();

        return res.data;

},

        (err) => {

        //失败回调 --终止promise链

        return Promise.reject(new Error("faill"));

}

);



export default http;

4.再api里创建一个文件夹例如index.js，在api文件夹内创建文件，代码如下

import http from '@/api/http'

export function getSliders(params){

return request({

url:'/swiper'//你的接口
method："get/post"
data:params//post请求带的数据

})
}

5.在页面中引入上方导出的方法

import { reqCreateTalk } from "@/api/index";

async handelOk() {
   
   const data = {} //post请求带的数据

      const res = await reqCreateTalk(data);

      try {
        
        if (res.code == 200) {
        
         //做一些事情
        }
      } catch (error) {
        console.log(error);
      }
    },
注：因为返回的是promise，所以要用try-catch来监控返回的信息，请求的时候
   要用async awiat