Axios 的二次分装

Axios 的二次分装"/>

Axios 的二次分装

为了方便对 axios 操作，我们通常对 axios 进行二次封装

首先在src目录下创建utils/request.js，然后在requset.js中配置  

• service.interceptors.request.use 里面设置请求头（token）
• service.interceptors.response.use 里面是对返回的数据进行操作

//1. 先引入axios依赖包
import axios from "axios";//2. axios创建对象
const Server = axios.create({baseURL: "", //管理后台要使用的接口的基地址timeout: 8000, //超时时间
})//3. 定义前置拦截器，请求拦截器，请求发送出去之前触发的
Server.interceptors.request.use((config) => {//config 接口请求的配置信息return config;
}, (error) => {//报错的是时候抛出一个报错的信息return Promise.reject(error);
})//4. 定义后置拦截器,响应拦截器, 服务器响应回来数据之前触发，
Server.interceptors.response.use((response) => {//响应回来的数据操作return response.data;
}, (error) => {//报错的是时候抛出一个报错的信息return Promise.reject(error);
})//5. 抛出对象的信息
export default Server;

接口管理

在上面utils目录下创建一个api.js用于管理接口

• url ：接口地址
• method ：请求方法
• data ：请求参数

import Service from "./index";
//定义请求方法，然后导出
export function Code(参数) {return service({url: "/smsCode",data: 参数,method: "post",});
}

调用的话，在页面中先引入

import { Code } from "@/service/api.js"

async created() {const res = await Code(参数);
}