axios二次封装

1.新建api文件夹,目录下创建ajax.js

//对于axios进行二次封装
import axios from "axios";

//底下的代码也是创建axios实例
let requests = axios.create({
  //基础路径
  baseURL: "/api",
  //请求不能超过5S
  timeout: 5000,
});

//请求拦截器----在项目中发请求(请求没有发出去)可以做一些事情
requests.interceptors.request.use((config) => {
  //现在的问题是config是什么?配置对象
 
  return config;
});

//响应拦截器----当服务器手动请求之后,做出响应(相应成功)会执行的
requests.interceptors.response.use(
  (res) => {

    //相应成功做的事情
    return res.data;
  },
  (err) => {
    alert("服务器响应数据失败");
  }
);
//最终需要对外暴露(不对外暴露外面模块没办法使用)
//这里的代码是暴露一个axios实例
export default requests;

2.创建index.js统一接口管理

//统一管理项目接口的模块

//引入二次封装的axios(带有请求、响应的拦截器)
import requests from "./ajax";

export const name= () =>requests.get(`接口路径`);

//当前这个接口(获取搜索模块的数据),给服务器传递一个默认参数【至少是一个空对象】
export const search= (params)=>requests({url:"接口路径",method:"post",data:params});

//获取产品详情信息的接口  URL: /api/item/{ skuId }  请求方式:get   
export const reqGoodsInfo = (skuId)=>requests({url:`/item/${skuId}`,method:'get'});

你可能感兴趣的:(vue.js,vue.js)