项目封装网络请求、请求拦截和相应拦截

封装网络请求

这里是写在一个基本的js配置文件中，封装网络请求

// 通用的网络请求，安装axios
import axios from "axios";
//设置每个请求的类型，比如post、get、delete，所以要写成活的
export function request(config) {
    const instance = axios.create({
        baseURL: 'https://域名.cn/', //这里是默认的域名
        timeout: 5000 //5s超时，截止请求
    })

请求拦截

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改就很方便了~

 //请求拦截
    instance.interceptors.request.use(config => {
        //如果有一个接口需要认证才可以访问，就在这里统一设置
        return config;
    }, err => {

    })

响应拦截

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器。

 //响应拦截,请求后台数据的时候，
    instance.interceptors.response.use(res => {
        //返回状态码200放行
        return res.data ? res.data : res;
    }, err => {
        //其他错误，拦截，过滤
    })

全部代码

// 通用的网络请求，安装axios
import axios from "axios";
//设置每个请求的类型，比如post、get、delete，所以要写成活的
export function request(config) {
    const instance = axios.create({
        baseURL: 'https://api.shop.eduwork.cn/', //这里是默认的域名
        timeout: 5000 //5s超时，截止请求
    })
    //请求拦截
    instance.interceptors.request.use(config => {
        //如果有一个接口需要认证才可以访问，就在这里统一设置
        return config;
    }, err => {

    })
    //响应拦截,请求后台数据的时候，
    instance.interceptors.response.use(res => {
        //返回状态码200放行
        return res.data ? res.data : res;
    }, err => {
        //其他错误，拦截，过滤
    })
    //需要返回才可以使用
 return instance(config);
}