axios封装

在大型项目中 http请求会有很多 而且我们需要区分 所以我们可以把数据请求拆分出来 单独管理这样一来 就可以增强项目的可维护性与可扩展性

1. api 请求集中式管理

2. 实现请求拦截

3. 实现响应拦截

4. 常见错误信息处理

5. 请求头设置

api请求集中管理

1.初始化axios实例 编写util文件夹 在编写index.js来容纳封装内容

 import axios from "axios"
  // 创建 axios 请求实例
  const serviceAxios = axios.create({
      baseURL: "", // 基础请求地址
      timeout: 10000, // 请求超时设置
  });
  export default serviceAxios

 2.新建api文件夹 并且编写js文件用来容纳 api请求集中管理

import request from "../util/index.js"

export let funget=()=>{
    return request({
        url:"/api/userlist/get",
        method:"GET",
        params:{
            name:"xixi"
        }
    })
}

3.在组件中进行使用我们封装的 api请求集中管理

		// 引用
		import {funget} from "../api/index.js"


        // 使用
        funget().then((ok)=>{
            console.log(ok)
        })
    }

axios拦截器

请求拦截

有的时候我们在发送请求的时候后端需要每次我们携带一些数据（比如token）但是添加在每个请求非常麻烦 所以我们可以添加在请求头中 那么这个配置我们可以在拦截器中进行设置

响应拦截

响应拦截器的作用是在接收到响应后进行一些操作

响应拦截器也是一样如此，就是在请求结果返回后，先不直接显示错误，而是先对响应码等等进行处理，处理好后再导出给页面一个错误提醒

添加请求 响应拦截

import axios from "axios"
// 创建 axios 请求实例
const serviceAxios = axios.create({
    baseURL: "", // 基础请求地址
    timeout: 10000, // 请求超时设置

});
// 添加请求拦截器
serviceAxios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
serviceAxios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

响应拦截设置HTTP状态码

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    console.log("error", error.response.status)
    switch (error.response.status) {
        case 302: alert('接口重定向了！'); break;
        case 400: alert('参数不正确！'); break;
        case 401: alert('您未登录，或者登录已经超时，请先登录！'); break;
        case 403: alert('您没有权限操作！'); break;
        case 404: alert('请求地址出错'); break; // 在正确域名下
        case 408: alert('请求超时！'); break;
        case 409: alert('系统已存在相同数据！'); break;
        case 500: alert('服务器内部错误！'); break;
        case 501: alert('服务未实现！'); break;
        case 502: alert('网关错误！'); break;
        case 503: alert('服务不可用！'); break;
        case 504: alert('服务暂时无法访问，请稍后再试！'); break;
        case 505: alert('HTTP版本不受支持！'); break;
        default: alert('异常问题，请联系管理员！'); break
    }
    // 对响应错误做点什么
    return Promise.reject(error);
});

设置请求拦截请求头信息

你把用户的token以请求头的方式给后台

地址：/userlist/routertoken

方式 get

参数: 头信息是usertoken

返回值??